@charset "UTF-8";
/**
 * Main CSS Bundle - Import all layers in correct order
 */
/* Icon system - Bootstrap Icons (local) */
/*!
 * Bootstrap Icons v1.13.1 (https://icons.getbootstrap.com/)
 * Copyright 2019-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
 */
@font-face{font-display:block;font-family:bootstrap-icons;src:url('/Technische-Medien/Assets/data-0a01d56f-woff2.woff2') format("woff2"),url('/Technische-Medien/Assets/data-c251a031-woff.woff') format("woff")}
.bi::before,[class*=" bi-"]::before,[class^=bi-]::before{display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:400!important;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.bi-123::before{content:"\f67f"}
.bi-alarm-fill::before{content:"\f101"}
.bi-alarm::before{content:"\f102"}
.bi-align-bottom::before{content:"\f103"}
.bi-align-center::before{content:"\f104"}
.bi-align-end::before{content:"\f105"}
.bi-align-middle::before{content:"\f106"}
.bi-align-start::before{content:"\f107"}
.bi-align-top::before{content:"\f108"}
.bi-alt::before{content:"\f109"}
.bi-app-indicator::before{content:"\f10a"}
.bi-app::before{content:"\f10b"}
.bi-archive-fill::before{content:"\f10c"}
.bi-archive::before{content:"\f10d"}
.bi-arrow-90deg-down::before{content:"\f10e"}
.bi-arrow-90deg-left::before{content:"\f10f"}
.bi-arrow-90deg-right::before{content:"\f110"}
.bi-arrow-90deg-up::before{content:"\f111"}
.bi-arrow-bar-down::before{content:"\f112"}
.bi-arrow-bar-left::before{content:"\f113"}
.bi-arrow-bar-right::before{content:"\f114"}
.bi-arrow-bar-up::before{content:"\f115"}
.bi-arrow-clockwise::before{content:"\f116"}
.bi-arrow-counterclockwise::before{content:"\f117"}
.bi-arrow-down-circle-fill::before{content:"\f118"}
.bi-arrow-down-circle::before{content:"\f119"}
.bi-arrow-down-left-circle-fill::before{content:"\f11a"}
.bi-arrow-down-left-circle::before{content:"\f11b"}
.bi-arrow-down-left-square-fill::before{content:"\f11c"}
.bi-arrow-down-left-square::before{content:"\f11d"}
.bi-arrow-down-left::before{content:"\f11e"}
.bi-arrow-down-right-circle-fill::before{content:"\f11f"}
.bi-arrow-down-right-circle::before{content:"\f120"}
.bi-arrow-down-right-square-fill::before{content:"\f121"}
.bi-arrow-down-right-square::before{content:"\f122"}
.bi-arrow-down-right::before{content:"\f123"}
.bi-arrow-down-short::before{content:"\f124"}
.bi-arrow-down-square-fill::before{content:"\f125"}
.bi-arrow-down-square::before{content:"\f126"}
.bi-arrow-down-up::before{content:"\f127"}
.bi-arrow-down::before{content:"\f128"}
.bi-arrow-left-circle-fill::before{content:"\f129"}
.bi-arrow-left-circle::before{content:"\f12a"}
.bi-arrow-left-right::before{content:"\f12b"}
.bi-arrow-left-short::before{content:"\f12c"}
.bi-arrow-left-square-fill::before{content:"\f12d"}
.bi-arrow-left-square::before{content:"\f12e"}
.bi-arrow-left::before{content:"\f12f"}
.bi-arrow-repeat::before{content:"\f130"}
.bi-arrow-return-left::before{content:"\f131"}
.bi-arrow-return-right::before{content:"\f132"}
.bi-arrow-right-circle-fill::before{content:"\f133"}
.bi-arrow-right-circle::before{content:"\f134"}
.bi-arrow-right-short::before{content:"\f135"}
.bi-arrow-right-square-fill::before{content:"\f136"}
.bi-arrow-right-square::before{content:"\f137"}
.bi-arrow-right::before{content:"\f138"}
.bi-arrow-up-circle-fill::before{content:"\f139"}
.bi-arrow-up-circle::before{content:"\f13a"}
.bi-arrow-up-left-circle-fill::before{content:"\f13b"}
.bi-arrow-up-left-circle::before{content:"\f13c"}
.bi-arrow-up-left-square-fill::before{content:"\f13d"}
.bi-arrow-up-left-square::before{content:"\f13e"}
.bi-arrow-up-left::before{content:"\f13f"}
.bi-arrow-up-right-circle-fill::before{content:"\f140"}
.bi-arrow-up-right-circle::before{content:"\f141"}
.bi-arrow-up-right-square-fill::before{content:"\f142"}
.bi-arrow-up-right-square::before{content:"\f143"}
.bi-arrow-up-right::before{content:"\f144"}
.bi-arrow-up-short::before{content:"\f145"}
.bi-arrow-up-square-fill::before{content:"\f146"}
.bi-arrow-up-square::before{content:"\f147"}
.bi-arrow-up::before{content:"\f148"}
.bi-arrows-angle-contract::before{content:"\f149"}
.bi-arrows-angle-expand::before{content:"\f14a"}
.bi-arrows-collapse::before{content:"\f14b"}
.bi-arrows-expand::before{content:"\f14c"}
.bi-arrows-fullscreen::before{content:"\f14d"}
.bi-arrows-move::before{content:"\f14e"}
.bi-aspect-ratio-fill::before{content:"\f14f"}
.bi-aspect-ratio::before{content:"\f150"}
.bi-asterisk::before{content:"\f151"}
.bi-at::before{content:"\f152"}
.bi-award-fill::before{content:"\f153"}
.bi-award::before{content:"\f154"}
.bi-back::before{content:"\f155"}
.bi-backspace-fill::before{content:"\f156"}
.bi-backspace-reverse-fill::before{content:"\f157"}
.bi-backspace-reverse::before{content:"\f158"}
.bi-backspace::before{content:"\f159"}
.bi-badge-3d-fill::before{content:"\f15a"}
.bi-badge-3d::before{content:"\f15b"}
.bi-badge-4k-fill::before{content:"\f15c"}
.bi-badge-4k::before{content:"\f15d"}
.bi-badge-8k-fill::before{content:"\f15e"}
.bi-badge-8k::before{content:"\f15f"}
.bi-badge-ad-fill::before{content:"\f160"}
.bi-badge-ad::before{content:"\f161"}
.bi-badge-ar-fill::before{content:"\f162"}
.bi-badge-ar::before{content:"\f163"}
.bi-badge-cc-fill::before{content:"\f164"}
.bi-badge-cc::before{content:"\f165"}
.bi-badge-hd-fill::before{content:"\f166"}
.bi-badge-hd::before{content:"\f167"}
.bi-badge-tm-fill::before{content:"\f168"}
.bi-badge-tm::before{content:"\f169"}
.bi-badge-vo-fill::before{content:"\f16a"}
.bi-badge-vo::before{content:"\f16b"}
.bi-badge-vr-fill::before{content:"\f16c"}
.bi-badge-vr::before{content:"\f16d"}
.bi-badge-wc-fill::before{content:"\f16e"}
.bi-badge-wc::before{content:"\f16f"}
.bi-bag-check-fill::before{content:"\f170"}
.bi-bag-check::before{content:"\f171"}
.bi-bag-dash-fill::before{content:"\f172"}
.bi-bag-dash::before{content:"\f173"}
.bi-bag-fill::before{content:"\f174"}
.bi-bag-plus-fill::before{content:"\f175"}
.bi-bag-plus::before{content:"\f176"}
.bi-bag-x-fill::before{content:"\f177"}
.bi-bag-x::before{content:"\f178"}
.bi-bag::before{content:"\f179"}
.bi-bar-chart-fill::before{content:"\f17a"}
.bi-bar-chart-line-fill::before{content:"\f17b"}
.bi-bar-chart-line::before{content:"\f17c"}
.bi-bar-chart-steps::before{content:"\f17d"}
.bi-bar-chart::before{content:"\f17e"}
.bi-basket-fill::before{content:"\f17f"}
.bi-basket::before{content:"\f180"}
.bi-basket2-fill::before{content:"\f181"}
.bi-basket2::before{content:"\f182"}
.bi-basket3-fill::before{content:"\f183"}
.bi-basket3::before{content:"\f184"}
.bi-battery-charging::before{content:"\f185"}
.bi-battery-full::before{content:"\f186"}
.bi-battery-half::before{content:"\f187"}
.bi-battery::before{content:"\f188"}
.bi-bell-fill::before{content:"\f189"}
.bi-bell::before{content:"\f18a"}
.bi-bezier::before{content:"\f18b"}
.bi-bezier2::before{content:"\f18c"}
.bi-bicycle::before{content:"\f18d"}
.bi-binoculars-fill::before{content:"\f18e"}
.bi-binoculars::before{content:"\f18f"}
.bi-blockquote-left::before{content:"\f190"}
.bi-blockquote-right::before{content:"\f191"}
.bi-book-fill::before{content:"\f192"}
.bi-book-half::before{content:"\f193"}
.bi-book::before{content:"\f194"}
.bi-bookmark-check-fill::before{content:"\f195"}
.bi-bookmark-check::before{content:"\f196"}
.bi-bookmark-dash-fill::before{content:"\f197"}
.bi-bookmark-dash::before{content:"\f198"}
.bi-bookmark-fill::before{content:"\f199"}
.bi-bookmark-heart-fill::before{content:"\f19a"}
.bi-bookmark-heart::before{content:"\f19b"}
.bi-bookmark-plus-fill::before{content:"\f19c"}
.bi-bookmark-plus::before{content:"\f19d"}
.bi-bookmark-star-fill::before{content:"\f19e"}
.bi-bookmark-star::before{content:"\f19f"}
.bi-bookmark-x-fill::before{content:"\f1a0"}
.bi-bookmark-x::before{content:"\f1a1"}
.bi-bookmark::before{content:"\f1a2"}
.bi-bookmarks-fill::before{content:"\f1a3"}
.bi-bookmarks::before{content:"\f1a4"}
.bi-bookshelf::before{content:"\f1a5"}
.bi-bootstrap-fill::before{content:"\f1a6"}
.bi-bootstrap-reboot::before{content:"\f1a7"}
.bi-bootstrap::before{content:"\f1a8"}
.bi-border-all::before{content:"\f1a9"}
.bi-border-bottom::before{content:"\f1aa"}
.bi-border-center::before{content:"\f1ab"}
.bi-border-inner::before{content:"\f1ac"}
.bi-border-left::before{content:"\f1ad"}
.bi-border-middle::before{content:"\f1ae"}
.bi-border-outer::before{content:"\f1af"}
.bi-border-right::before{content:"\f1b0"}
.bi-border-style::before{content:"\f1b1"}
.bi-border-top::before{content:"\f1b2"}
.bi-border-width::before{content:"\f1b3"}
.bi-border::before{content:"\f1b4"}
.bi-bounding-box-circles::before{content:"\f1b5"}
.bi-bounding-box::before{content:"\f1b6"}
.bi-box-arrow-down-left::before{content:"\f1b7"}
.bi-box-arrow-down-right::before{content:"\f1b8"}
.bi-box-arrow-down::before{content:"\f1b9"}
.bi-box-arrow-in-down-left::before{content:"\f1ba"}
.bi-box-arrow-in-down-right::before{content:"\f1bb"}
.bi-box-arrow-in-down::before{content:"\f1bc"}
.bi-box-arrow-in-left::before{content:"\f1bd"}
.bi-box-arrow-in-right::before{content:"\f1be"}
.bi-box-arrow-in-up-left::before{content:"\f1bf"}
.bi-box-arrow-in-up-right::before{content:"\f1c0"}
.bi-box-arrow-in-up::before{content:"\f1c1"}
.bi-box-arrow-left::before{content:"\f1c2"}
.bi-box-arrow-right::before{content:"\f1c3"}
.bi-box-arrow-up-left::before{content:"\f1c4"}
.bi-box-arrow-up-right::before{content:"\f1c5"}
.bi-box-arrow-up::before{content:"\f1c6"}
.bi-box-seam::before{content:"\f1c7"}
.bi-box::before{content:"\f1c8"}
.bi-braces::before{content:"\f1c9"}
.bi-bricks::before{content:"\f1ca"}
.bi-briefcase-fill::before{content:"\f1cb"}
.bi-briefcase::before{content:"\f1cc"}
.bi-brightness-alt-high-fill::before{content:"\f1cd"}
.bi-brightness-alt-high::before{content:"\f1ce"}
.bi-brightness-alt-low-fill::before{content:"\f1cf"}
.bi-brightness-alt-low::before{content:"\f1d0"}
.bi-brightness-high-fill::before{content:"\f1d1"}
.bi-brightness-high::before{content:"\f1d2"}
.bi-brightness-low-fill::before{content:"\f1d3"}
.bi-brightness-low::before{content:"\f1d4"}
.bi-broadcast-pin::before{content:"\f1d5"}
.bi-broadcast::before{content:"\f1d6"}
.bi-brush-fill::before{content:"\f1d7"}
.bi-brush::before{content:"\f1d8"}
.bi-bucket-fill::before{content:"\f1d9"}
.bi-bucket::before{content:"\f1da"}
.bi-bug-fill::before{content:"\f1db"}
.bi-bug::before{content:"\f1dc"}
.bi-building::before{content:"\f1dd"}
.bi-bullseye::before{content:"\f1de"}
.bi-calculator-fill::before{content:"\f1df"}
.bi-calculator::before{content:"\f1e0"}
.bi-calendar-check-fill::before{content:"\f1e1"}
.bi-calendar-check::before{content:"\f1e2"}
.bi-calendar-date-fill::before{content:"\f1e3"}
.bi-calendar-date::before{content:"\f1e4"}
.bi-calendar-day-fill::before{content:"\f1e5"}
.bi-calendar-day::before{content:"\f1e6"}
.bi-calendar-event-fill::before{content:"\f1e7"}
.bi-calendar-event::before{content:"\f1e8"}
.bi-calendar-fill::before{content:"\f1e9"}
.bi-calendar-minus-fill::before{content:"\f1ea"}
.bi-calendar-minus::before{content:"\f1eb"}
.bi-calendar-month-fill::before{content:"\f1ec"}
.bi-calendar-month::before{content:"\f1ed"}
.bi-calendar-plus-fill::before{content:"\f1ee"}
.bi-calendar-plus::before{content:"\f1ef"}
.bi-calendar-range-fill::before{content:"\f1f0"}
.bi-calendar-range::before{content:"\f1f1"}
.bi-calendar-week-fill::before{content:"\f1f2"}
.bi-calendar-week::before{content:"\f1f3"}
.bi-calendar-x-fill::before{content:"\f1f4"}
.bi-calendar-x::before{content:"\f1f5"}
.bi-calendar::before{content:"\f1f6"}
.bi-calendar2-check-fill::before{content:"\f1f7"}
.bi-calendar2-check::before{content:"\f1f8"}
.bi-calendar2-date-fill::before{content:"\f1f9"}
.bi-calendar2-date::before{content:"\f1fa"}
.bi-calendar2-day-fill::before{content:"\f1fb"}
.bi-calendar2-day::before{content:"\f1fc"}
.bi-calendar2-event-fill::before{content:"\f1fd"}
.bi-calendar2-event::before{content:"\f1fe"}
.bi-calendar2-fill::before{content:"\f1ff"}
.bi-calendar2-minus-fill::before{content:"\f200"}
.bi-calendar2-minus::before{content:"\f201"}
.bi-calendar2-month-fill::before{content:"\f202"}
.bi-calendar2-month::before{content:"\f203"}
.bi-calendar2-plus-fill::before{content:"\f204"}
.bi-calendar2-plus::before{content:"\f205"}
.bi-calendar2-range-fill::before{content:"\f206"}
.bi-calendar2-range::before{content:"\f207"}
.bi-calendar2-week-fill::before{content:"\f208"}
.bi-calendar2-week::before{content:"\f209"}
.bi-calendar2-x-fill::before{content:"\f20a"}
.bi-calendar2-x::before{content:"\f20b"}
.bi-calendar2::before{content:"\f20c"}
.bi-calendar3-event-fill::before{content:"\f20d"}
.bi-calendar3-event::before{content:"\f20e"}
.bi-calendar3-fill::before{content:"\f20f"}
.bi-calendar3-range-fill::before{content:"\f210"}
.bi-calendar3-range::before{content:"\f211"}
.bi-calendar3-week-fill::before{content:"\f212"}
.bi-calendar3-week::before{content:"\f213"}
.bi-calendar3::before{content:"\f214"}
.bi-calendar4-event::before{content:"\f215"}
.bi-calendar4-range::before{content:"\f216"}
.bi-calendar4-week::before{content:"\f217"}
.bi-calendar4::before{content:"\f218"}
.bi-camera-fill::before{content:"\f219"}
.bi-camera-reels-fill::before{content:"\f21a"}
.bi-camera-reels::before{content:"\f21b"}
.bi-camera-video-fill::before{content:"\f21c"}
.bi-camera-video-off-fill::before{content:"\f21d"}
.bi-camera-video-off::before{content:"\f21e"}
.bi-camera-video::before{content:"\f21f"}
.bi-camera::before{content:"\f220"}
.bi-camera2::before{content:"\f221"}
.bi-capslock-fill::before{content:"\f222"}
.bi-capslock::before{content:"\f223"}
.bi-card-checklist::before{content:"\f224"}
.bi-card-heading::before{content:"\f225"}
.bi-card-image::before{content:"\f226"}
.bi-card-list::before{content:"\f227"}
.bi-card-text::before{content:"\f228"}
.bi-caret-down-fill::before{content:"\f229"}
.bi-caret-down-square-fill::before{content:"\f22a"}
.bi-caret-down-square::before{content:"\f22b"}
.bi-caret-down::before{content:"\f22c"}
.bi-caret-left-fill::before{content:"\f22d"}
.bi-caret-left-square-fill::before{content:"\f22e"}
.bi-caret-left-square::before{content:"\f22f"}
.bi-caret-left::before{content:"\f230"}
.bi-caret-right-fill::before{content:"\f231"}
.bi-caret-right-square-fill::before{content:"\f232"}
.bi-caret-right-square::before{content:"\f233"}
.bi-caret-right::before{content:"\f234"}
.bi-caret-up-fill::before{content:"\f235"}
.bi-caret-up-square-fill::before{content:"\f236"}
.bi-caret-up-square::before{content:"\f237"}
.bi-caret-up::before{content:"\f238"}
.bi-cart-check-fill::before{content:"\f239"}
.bi-cart-check::before{content:"\f23a"}
.bi-cart-dash-fill::before{content:"\f23b"}
.bi-cart-dash::before{content:"\f23c"}
.bi-cart-fill::before{content:"\f23d"}
.bi-cart-plus-fill::before{content:"\f23e"}
.bi-cart-plus::before{content:"\f23f"}
.bi-cart-x-fill::before{content:"\f240"}
.bi-cart-x::before{content:"\f241"}
.bi-cart::before{content:"\f242"}
.bi-cart2::before{content:"\f243"}
.bi-cart3::before{content:"\f244"}
.bi-cart4::before{content:"\f245"}
.bi-cash-stack::before{content:"\f246"}
.bi-cash::before{content:"\f247"}
.bi-cast::before{content:"\f248"}
.bi-chat-dots-fill::before{content:"\f249"}
.bi-chat-dots::before{content:"\f24a"}
.bi-chat-fill::before{content:"\f24b"}
.bi-chat-left-dots-fill::before{content:"\f24c"}
.bi-chat-left-dots::before{content:"\f24d"}
.bi-chat-left-fill::before{content:"\f24e"}
.bi-chat-left-quote-fill::before{content:"\f24f"}
.bi-chat-left-quote::before{content:"\f250"}
.bi-chat-left-text-fill::before{content:"\f251"}
.bi-chat-left-text::before{content:"\f252"}
.bi-chat-left::before{content:"\f253"}
.bi-chat-quote-fill::before{content:"\f254"}
.bi-chat-quote::before{content:"\f255"}
.bi-chat-right-dots-fill::before{content:"\f256"}
.bi-chat-right-dots::before{content:"\f257"}
.bi-chat-right-fill::before{content:"\f258"}
.bi-chat-right-quote-fill::before{content:"\f259"}
.bi-chat-right-quote::before{content:"\f25a"}
.bi-chat-right-text-fill::before{content:"\f25b"}
.bi-chat-right-text::before{content:"\f25c"}
.bi-chat-right::before{content:"\f25d"}
.bi-chat-square-dots-fill::before{content:"\f25e"}
.bi-chat-square-dots::before{content:"\f25f"}
.bi-chat-square-fill::before{content:"\f260"}
.bi-chat-square-quote-fill::before{content:"\f261"}
.bi-chat-square-quote::before{content:"\f262"}
.bi-chat-square-text-fill::before{content:"\f263"}
.bi-chat-square-text::before{content:"\f264"}
.bi-chat-square::before{content:"\f265"}
.bi-chat-text-fill::before{content:"\f266"}
.bi-chat-text::before{content:"\f267"}
.bi-chat::before{content:"\f268"}
.bi-check-all::before{content:"\f269"}
.bi-check-circle-fill::before{content:"\f26a"}
.bi-check-circle::before{content:"\f26b"}
.bi-check-square-fill::before{content:"\f26c"}
.bi-check-square::before{content:"\f26d"}
.bi-check::before{content:"\f26e"}
.bi-check2-all::before{content:"\f26f"}
.bi-check2-circle::before{content:"\f270"}
.bi-check2-square::before{content:"\f271"}
.bi-check2::before{content:"\f272"}
.bi-chevron-bar-contract::before{content:"\f273"}
.bi-chevron-bar-down::before{content:"\f274"}
.bi-chevron-bar-expand::before{content:"\f275"}
.bi-chevron-bar-left::before{content:"\f276"}
.bi-chevron-bar-right::before{content:"\f277"}
.bi-chevron-bar-up::before{content:"\f278"}
.bi-chevron-compact-down::before{content:"\f279"}
.bi-chevron-compact-left::before{content:"\f27a"}
.bi-chevron-compact-right::before{content:"\f27b"}
.bi-chevron-compact-up::before{content:"\f27c"}
.bi-chevron-contract::before{content:"\f27d"}
.bi-chevron-double-down::before{content:"\f27e"}
.bi-chevron-double-left::before{content:"\f27f"}
.bi-chevron-double-right::before{content:"\f280"}
.bi-chevron-double-up::before{content:"\f281"}
.bi-chevron-down::before{content:"\f282"}
.bi-chevron-expand::before{content:"\f283"}
.bi-chevron-left::before{content:"\f284"}
.bi-chevron-right::before{content:"\f285"}
.bi-chevron-up::before{content:"\f286"}
.bi-circle-fill::before{content:"\f287"}
.bi-circle-half::before{content:"\f288"}
.bi-circle-square::before{content:"\f289"}
.bi-circle::before{content:"\f28a"}
.bi-clipboard-check::before{content:"\f28b"}
.bi-clipboard-data::before{content:"\f28c"}
.bi-clipboard-minus::before{content:"\f28d"}
.bi-clipboard-plus::before{content:"\f28e"}
.bi-clipboard-x::before{content:"\f28f"}
.bi-clipboard::before{content:"\f290"}
.bi-clock-fill::before{content:"\f291"}
.bi-clock-history::before{content:"\f292"}
.bi-clock::before{content:"\f293"}
.bi-cloud-arrow-down-fill::before{content:"\f294"}
.bi-cloud-arrow-down::before{content:"\f295"}
.bi-cloud-arrow-up-fill::before{content:"\f296"}
.bi-cloud-arrow-up::before{content:"\f297"}
.bi-cloud-check-fill::before{content:"\f298"}
.bi-cloud-check::before{content:"\f299"}
.bi-cloud-download-fill::before{content:"\f29a"}
.bi-cloud-download::before{content:"\f29b"}
.bi-cloud-drizzle-fill::before{content:"\f29c"}
.bi-cloud-drizzle::before{content:"\f29d"}
.bi-cloud-fill::before{content:"\f29e"}
.bi-cloud-fog-fill::before{content:"\f29f"}
.bi-cloud-fog::before{content:"\f2a0"}
.bi-cloud-fog2-fill::before{content:"\f2a1"}
.bi-cloud-fog2::before{content:"\f2a2"}
.bi-cloud-hail-fill::before{content:"\f2a3"}
.bi-cloud-hail::before{content:"\f2a4"}
.bi-cloud-haze-fill::before{content:"\f2a6"}
.bi-cloud-haze::before{content:"\f2a7"}
.bi-cloud-haze2-fill::before{content:"\f2a8"}
.bi-cloud-lightning-fill::before{content:"\f2a9"}
.bi-cloud-lightning-rain-fill::before{content:"\f2aa"}
.bi-cloud-lightning-rain::before{content:"\f2ab"}
.bi-cloud-lightning::before{content:"\f2ac"}
.bi-cloud-minus-fill::before{content:"\f2ad"}
.bi-cloud-minus::before{content:"\f2ae"}
.bi-cloud-moon-fill::before{content:"\f2af"}
.bi-cloud-moon::before{content:"\f2b0"}
.bi-cloud-plus-fill::before{content:"\f2b1"}
.bi-cloud-plus::before{content:"\f2b2"}
.bi-cloud-rain-fill::before{content:"\f2b3"}
.bi-cloud-rain-heavy-fill::before{content:"\f2b4"}
.bi-cloud-rain-heavy::before{content:"\f2b5"}
.bi-cloud-rain::before{content:"\f2b6"}
.bi-cloud-slash-fill::before{content:"\f2b7"}
.bi-cloud-slash::before{content:"\f2b8"}
.bi-cloud-sleet-fill::before{content:"\f2b9"}
.bi-cloud-sleet::before{content:"\f2ba"}
.bi-cloud-snow-fill::before{content:"\f2bb"}
.bi-cloud-snow::before{content:"\f2bc"}
.bi-cloud-sun-fill::before{content:"\f2bd"}
.bi-cloud-sun::before{content:"\f2be"}
.bi-cloud-upload-fill::before{content:"\f2bf"}
.bi-cloud-upload::before{content:"\f2c0"}
.bi-cloud::before{content:"\f2c1"}
.bi-clouds-fill::before{content:"\f2c2"}
.bi-clouds::before{content:"\f2c3"}
.bi-cloudy-fill::before{content:"\f2c4"}
.bi-cloudy::before{content:"\f2c5"}
.bi-code-slash::before{content:"\f2c6"}
.bi-code-square::before{content:"\f2c7"}
.bi-code::before{content:"\f2c8"}
.bi-collection-fill::before{content:"\f2c9"}
.bi-collection-play-fill::before{content:"\f2ca"}
.bi-collection-play::before{content:"\f2cb"}
.bi-collection::before{content:"\f2cc"}
.bi-columns-gap::before{content:"\f2cd"}
.bi-columns::before{content:"\f2ce"}
.bi-command::before{content:"\f2cf"}
.bi-compass-fill::before{content:"\f2d0"}
.bi-compass::before{content:"\f2d1"}
.bi-cone-striped::before{content:"\f2d2"}
.bi-cone::before{content:"\f2d3"}
.bi-controller::before{content:"\f2d4"}
.bi-cpu-fill::before{content:"\f2d5"}
.bi-cpu::before{content:"\f2d6"}
.bi-credit-card-2-back-fill::before{content:"\f2d7"}
.bi-credit-card-2-back::before{content:"\f2d8"}
.bi-credit-card-2-front-fill::before{content:"\f2d9"}
.bi-credit-card-2-front::before{content:"\f2da"}
.bi-credit-card-fill::before{content:"\f2db"}
.bi-credit-card::before{content:"\f2dc"}
.bi-crop::before{content:"\f2dd"}
.bi-cup-fill::before{content:"\f2de"}
.bi-cup-straw::before{content:"\f2df"}
.bi-cup::before{content:"\f2e0"}
.bi-cursor-fill::before{content:"\f2e1"}
.bi-cursor-text::before{content:"\f2e2"}
.bi-cursor::before{content:"\f2e3"}
.bi-dash-circle-dotted::before{content:"\f2e4"}
.bi-dash-circle-fill::before{content:"\f2e5"}
.bi-dash-circle::before{content:"\f2e6"}
.bi-dash-square-dotted::before{content:"\f2e7"}
.bi-dash-square-fill::before{content:"\f2e8"}
.bi-dash-square::before{content:"\f2e9"}
.bi-dash::before{content:"\f2ea"}
.bi-diagram-2-fill::before{content:"\f2eb"}
.bi-diagram-2::before{content:"\f2ec"}
.bi-diagram-3-fill::before{content:"\f2ed"}
.bi-diagram-3::before{content:"\f2ee"}
.bi-diamond-fill::before{content:"\f2ef"}
.bi-diamond-half::before{content:"\f2f0"}
.bi-diamond::before{content:"\f2f1"}
.bi-dice-1-fill::before{content:"\f2f2"}
.bi-dice-1::before{content:"\f2f3"}
.bi-dice-2-fill::before{content:"\f2f4"}
.bi-dice-2::before{content:"\f2f5"}
.bi-dice-3-fill::before{content:"\f2f6"}
.bi-dice-3::before{content:"\f2f7"}
.bi-dice-4-fill::before{content:"\f2f8"}
.bi-dice-4::before{content:"\f2f9"}
.bi-dice-5-fill::before{content:"\f2fa"}
.bi-dice-5::before{content:"\f2fb"}
.bi-dice-6-fill::before{content:"\f2fc"}
.bi-dice-6::before{content:"\f2fd"}
.bi-disc-fill::before{content:"\f2fe"}
.bi-disc::before{content:"\f2ff"}
.bi-discord::before{content:"\f300"}
.bi-display-fill::before{content:"\f301"}
.bi-display::before{content:"\f302"}
.bi-distribute-horizontal::before{content:"\f303"}
.bi-distribute-vertical::before{content:"\f304"}
.bi-door-closed-fill::before{content:"\f305"}
.bi-door-closed::before{content:"\f306"}
.bi-door-open-fill::before{content:"\f307"}
.bi-door-open::before{content:"\f308"}
.bi-dot::before{content:"\f309"}
.bi-download::before{content:"\f30a"}
.bi-droplet-fill::before{content:"\f30b"}
.bi-droplet-half::before{content:"\f30c"}
.bi-droplet::before{content:"\f30d"}
.bi-earbuds::before{content:"\f30e"}
.bi-easel-fill::before{content:"\f30f"}
.bi-easel::before{content:"\f310"}
.bi-egg-fill::before{content:"\f311"}
.bi-egg-fried::before{content:"\f312"}
.bi-egg::before{content:"\f313"}
.bi-eject-fill::before{content:"\f314"}
.bi-eject::before{content:"\f315"}
.bi-emoji-angry-fill::before{content:"\f316"}
.bi-emoji-angry::before{content:"\f317"}
.bi-emoji-dizzy-fill::before{content:"\f318"}
.bi-emoji-dizzy::before{content:"\f319"}
.bi-emoji-expressionless-fill::before{content:"\f31a"}
.bi-emoji-expressionless::before{content:"\f31b"}
.bi-emoji-frown-fill::before{content:"\f31c"}
.bi-emoji-frown::before{content:"\f31d"}
.bi-emoji-heart-eyes-fill::before{content:"\f31e"}
.bi-emoji-heart-eyes::before{content:"\f31f"}
.bi-emoji-laughing-fill::before{content:"\f320"}
.bi-emoji-laughing::before{content:"\f321"}
.bi-emoji-neutral-fill::before{content:"\f322"}
.bi-emoji-neutral::before{content:"\f323"}
.bi-emoji-smile-fill::before{content:"\f324"}
.bi-emoji-smile-upside-down-fill::before{content:"\f325"}
.bi-emoji-smile-upside-down::before{content:"\f326"}
.bi-emoji-smile::before{content:"\f327"}
.bi-emoji-sunglasses-fill::before{content:"\f328"}
.bi-emoji-sunglasses::before{content:"\f329"}
.bi-emoji-wink-fill::before{content:"\f32a"}
.bi-emoji-wink::before{content:"\f32b"}
.bi-envelope-fill::before{content:"\f32c"}
.bi-envelope-open-fill::before{content:"\f32d"}
.bi-envelope-open::before{content:"\f32e"}
.bi-envelope::before{content:"\f32f"}
.bi-eraser-fill::before{content:"\f330"}
.bi-eraser::before{content:"\f331"}
.bi-exclamation-circle-fill::before{content:"\f332"}
.bi-exclamation-circle::before{content:"\f333"}
.bi-exclamation-diamond-fill::before{content:"\f334"}
.bi-exclamation-diamond::before{content:"\f335"}
.bi-exclamation-octagon-fill::before{content:"\f336"}
.bi-exclamation-octagon::before{content:"\f337"}
.bi-exclamation-square-fill::before{content:"\f338"}
.bi-exclamation-square::before{content:"\f339"}
.bi-exclamation-triangle-fill::before{content:"\f33a"}
.bi-exclamation-triangle::before{content:"\f33b"}
.bi-exclamation::before{content:"\f33c"}
.bi-exclude::before{content:"\f33d"}
.bi-eye-fill::before{content:"\f33e"}
.bi-eye-slash-fill::before{content:"\f33f"}
.bi-eye-slash::before{content:"\f340"}
.bi-eye::before{content:"\f341"}
.bi-eyedropper::before{content:"\f342"}
.bi-eyeglasses::before{content:"\f343"}
.bi-facebook::before{content:"\f344"}
.bi-file-arrow-down-fill::before{content:"\f345"}
.bi-file-arrow-down::before{content:"\f346"}
.bi-file-arrow-up-fill::before{content:"\f347"}
.bi-file-arrow-up::before{content:"\f348"}
.bi-file-bar-graph-fill::before{content:"\f349"}
.bi-file-bar-graph::before{content:"\f34a"}
.bi-file-binary-fill::before{content:"\f34b"}
.bi-file-binary::before{content:"\f34c"}
.bi-file-break-fill::before{content:"\f34d"}
.bi-file-break::before{content:"\f34e"}
.bi-file-check-fill::before{content:"\f34f"}
.bi-file-check::before{content:"\f350"}
.bi-file-code-fill::before{content:"\f351"}
.bi-file-code::before{content:"\f352"}
.bi-file-diff-fill::before{content:"\f353"}
.bi-file-diff::before{content:"\f354"}
.bi-file-earmark-arrow-down-fill::before{content:"\f355"}
.bi-file-earmark-arrow-down::before{content:"\f356"}
.bi-file-earmark-arrow-up-fill::before{content:"\f357"}
.bi-file-earmark-arrow-up::before{content:"\f358"}
.bi-file-earmark-bar-graph-fill::before{content:"\f359"}
.bi-file-earmark-bar-graph::before{content:"\f35a"}
.bi-file-earmark-binary-fill::before{content:"\f35b"}
.bi-file-earmark-binary::before{content:"\f35c"}
.bi-file-earmark-break-fill::before{content:"\f35d"}
.bi-file-earmark-break::before{content:"\f35e"}
.bi-file-earmark-check-fill::before{content:"\f35f"}
.bi-file-earmark-check::before{content:"\f360"}
.bi-file-earmark-code-fill::before{content:"\f361"}
.bi-file-earmark-code::before{content:"\f362"}
.bi-file-earmark-diff-fill::before{content:"\f363"}
.bi-file-earmark-diff::before{content:"\f364"}
.bi-file-earmark-easel-fill::before{content:"\f365"}
.bi-file-earmark-easel::before{content:"\f366"}
.bi-file-earmark-excel-fill::before{content:"\f367"}
.bi-file-earmark-excel::before{content:"\f368"}
.bi-file-earmark-fill::before{content:"\f369"}
.bi-file-earmark-font-fill::before{content:"\f36a"}
.bi-file-earmark-font::before{content:"\f36b"}
.bi-file-earmark-image-fill::before{content:"\f36c"}
.bi-file-earmark-image::before{content:"\f36d"}
.bi-file-earmark-lock-fill::before{content:"\f36e"}
.bi-file-earmark-lock::before{content:"\f36f"}
.bi-file-earmark-lock2-fill::before{content:"\f370"}
.bi-file-earmark-lock2::before{content:"\f371"}
.bi-file-earmark-medical-fill::before{content:"\f372"}
.bi-file-earmark-medical::before{content:"\f373"}
.bi-file-earmark-minus-fill::before{content:"\f374"}
.bi-file-earmark-minus::before{content:"\f375"}
.bi-file-earmark-music-fill::before{content:"\f376"}
.bi-file-earmark-music::before{content:"\f377"}
.bi-file-earmark-person-fill::before{content:"\f378"}
.bi-file-earmark-person::before{content:"\f379"}
.bi-file-earmark-play-fill::before{content:"\f37a"}
.bi-file-earmark-play::before{content:"\f37b"}
.bi-file-earmark-plus-fill::before{content:"\f37c"}
.bi-file-earmark-plus::before{content:"\f37d"}
.bi-file-earmark-post-fill::before{content:"\f37e"}
.bi-file-earmark-post::before{content:"\f37f"}
.bi-file-earmark-ppt-fill::before{content:"\f380"}
.bi-file-earmark-ppt::before{content:"\f381"}
.bi-file-earmark-richtext-fill::before{content:"\f382"}
.bi-file-earmark-richtext::before{content:"\f383"}
.bi-file-earmark-ruled-fill::before{content:"\f384"}
.bi-file-earmark-ruled::before{content:"\f385"}
.bi-file-earmark-slides-fill::before{content:"\f386"}
.bi-file-earmark-slides::before{content:"\f387"}
.bi-file-earmark-spreadsheet-fill::before{content:"\f388"}
.bi-file-earmark-spreadsheet::before{content:"\f389"}
.bi-file-earmark-text-fill::before{content:"\f38a"}
.bi-file-earmark-text::before{content:"\f38b"}
.bi-file-earmark-word-fill::before{content:"\f38c"}
.bi-file-earmark-word::before{content:"\f38d"}
.bi-file-earmark-x-fill::before{content:"\f38e"}
.bi-file-earmark-x::before{content:"\f38f"}
.bi-file-earmark-zip-fill::before{content:"\f390"}
.bi-file-earmark-zip::before{content:"\f391"}
.bi-file-earmark::before{content:"\f392"}
.bi-file-easel-fill::before{content:"\f393"}
.bi-file-easel::before{content:"\f394"}
.bi-file-excel-fill::before{content:"\f395"}
.bi-file-excel::before{content:"\f396"}
.bi-file-fill::before{content:"\f397"}
.bi-file-font-fill::before{content:"\f398"}
.bi-file-font::before{content:"\f399"}
.bi-file-image-fill::before{content:"\f39a"}
.bi-file-image::before{content:"\f39b"}
.bi-file-lock-fill::before{content:"\f39c"}
.bi-file-lock::before{content:"\f39d"}
.bi-file-lock2-fill::before{content:"\f39e"}
.bi-file-lock2::before{content:"\f39f"}
.bi-file-medical-fill::before{content:"\f3a0"}
.bi-file-medical::before{content:"\f3a1"}
.bi-file-minus-fill::before{content:"\f3a2"}
.bi-file-minus::before{content:"\f3a3"}
.bi-file-music-fill::before{content:"\f3a4"}
.bi-file-music::before{content:"\f3a5"}
.bi-file-person-fill::before{content:"\f3a6"}
.bi-file-person::before{content:"\f3a7"}
.bi-file-play-fill::before{content:"\f3a8"}
.bi-file-play::before{content:"\f3a9"}
.bi-file-plus-fill::before{content:"\f3aa"}
.bi-file-plus::before{content:"\f3ab"}
.bi-file-post-fill::before{content:"\f3ac"}
.bi-file-post::before{content:"\f3ad"}
.bi-file-ppt-fill::before{content:"\f3ae"}
.bi-file-ppt::before{content:"\f3af"}
.bi-file-richtext-fill::before{content:"\f3b0"}
.bi-file-richtext::before{content:"\f3b1"}
.bi-file-ruled-fill::before{content:"\f3b2"}
.bi-file-ruled::before{content:"\f3b3"}
.bi-file-slides-fill::before{content:"\f3b4"}
.bi-file-slides::before{content:"\f3b5"}
.bi-file-spreadsheet-fill::before{content:"\f3b6"}
.bi-file-spreadsheet::before{content:"\f3b7"}
.bi-file-text-fill::before{content:"\f3b8"}
.bi-file-text::before{content:"\f3b9"}
.bi-file-word-fill::before{content:"\f3ba"}
.bi-file-word::before{content:"\f3bb"}
.bi-file-x-fill::before{content:"\f3bc"}
.bi-file-x::before{content:"\f3bd"}
.bi-file-zip-fill::before{content:"\f3be"}
.bi-file-zip::before{content:"\f3bf"}
.bi-file::before{content:"\f3c0"}
.bi-files-alt::before{content:"\f3c1"}
.bi-files::before{content:"\f3c2"}
.bi-film::before{content:"\f3c3"}
.bi-filter-circle-fill::before{content:"\f3c4"}
.bi-filter-circle::before{content:"\f3c5"}
.bi-filter-left::before{content:"\f3c6"}
.bi-filter-right::before{content:"\f3c7"}
.bi-filter-square-fill::before{content:"\f3c8"}
.bi-filter-square::before{content:"\f3c9"}
.bi-filter::before{content:"\f3ca"}
.bi-flag-fill::before{content:"\f3cb"}
.bi-flag::before{content:"\f3cc"}
.bi-flower1::before{content:"\f3cd"}
.bi-flower2::before{content:"\f3ce"}
.bi-flower3::before{content:"\f3cf"}
.bi-folder-check::before{content:"\f3d0"}
.bi-folder-fill::before{content:"\f3d1"}
.bi-folder-minus::before{content:"\f3d2"}
.bi-folder-plus::before{content:"\f3d3"}
.bi-folder-symlink-fill::before{content:"\f3d4"}
.bi-folder-symlink::before{content:"\f3d5"}
.bi-folder-x::before{content:"\f3d6"}
.bi-folder::before{content:"\f3d7"}
.bi-folder2-open::before{content:"\f3d8"}
.bi-folder2::before{content:"\f3d9"}
.bi-fonts::before{content:"\f3da"}
.bi-forward-fill::before{content:"\f3db"}
.bi-forward::before{content:"\f3dc"}
.bi-front::before{content:"\f3dd"}
.bi-fullscreen-exit::before{content:"\f3de"}
.bi-fullscreen::before{content:"\f3df"}
.bi-funnel-fill::before{content:"\f3e0"}
.bi-funnel::before{content:"\f3e1"}
.bi-gear-fill::before{content:"\f3e2"}
.bi-gear-wide-connected::before{content:"\f3e3"}
.bi-gear-wide::before{content:"\f3e4"}
.bi-gear::before{content:"\f3e5"}
.bi-gem::before{content:"\f3e6"}
.bi-geo-alt-fill::before{content:"\f3e7"}
.bi-geo-alt::before{content:"\f3e8"}
.bi-geo-fill::before{content:"\f3e9"}
.bi-geo::before{content:"\f3ea"}
.bi-gift-fill::before{content:"\f3eb"}
.bi-gift::before{content:"\f3ec"}
.bi-github::before{content:"\f3ed"}
.bi-globe::before{content:"\f3ee"}
.bi-globe2::before{content:"\f3ef"}
.bi-google::before{content:"\f3f0"}
.bi-graph-down::before{content:"\f3f1"}
.bi-graph-up::before{content:"\f3f2"}
.bi-grid-1x2-fill::before{content:"\f3f3"}
.bi-grid-1x2::before{content:"\f3f4"}
.bi-grid-3x2-gap-fill::before{content:"\f3f5"}
.bi-grid-3x2-gap::before{content:"\f3f6"}
.bi-grid-3x2::before{content:"\f3f7"}
.bi-grid-3x3-gap-fill::before{content:"\f3f8"}
.bi-grid-3x3-gap::before{content:"\f3f9"}
.bi-grid-3x3::before{content:"\f3fa"}
.bi-grid-fill::before{content:"\f3fb"}
.bi-grid::before{content:"\f3fc"}
.bi-grip-horizontal::before{content:"\f3fd"}
.bi-grip-vertical::before{content:"\f3fe"}
.bi-hammer::before{content:"\f3ff"}
.bi-hand-index-fill::before{content:"\f400"}
.bi-hand-index-thumb-fill::before{content:"\f401"}
.bi-hand-index-thumb::before{content:"\f402"}
.bi-hand-index::before{content:"\f403"}
.bi-hand-thumbs-down-fill::before{content:"\f404"}
.bi-hand-thumbs-down::before{content:"\f405"}
.bi-hand-thumbs-up-fill::before{content:"\f406"}
.bi-hand-thumbs-up::before{content:"\f407"}
.bi-handbag-fill::before{content:"\f408"}
.bi-handbag::before{content:"\f409"}
.bi-hash::before{content:"\f40a"}
.bi-hdd-fill::before{content:"\f40b"}
.bi-hdd-network-fill::before{content:"\f40c"}
.bi-hdd-network::before{content:"\f40d"}
.bi-hdd-rack-fill::before{content:"\f40e"}
.bi-hdd-rack::before{content:"\f40f"}
.bi-hdd-stack-fill::before{content:"\f410"}
.bi-hdd-stack::before{content:"\f411"}
.bi-hdd::before{content:"\f412"}
.bi-headphones::before{content:"\f413"}
.bi-headset::before{content:"\f414"}
.bi-heart-fill::before{content:"\f415"}
.bi-heart-half::before{content:"\f416"}
.bi-heart::before{content:"\f417"}
.bi-heptagon-fill::before{content:"\f418"}
.bi-heptagon-half::before{content:"\f419"}
.bi-heptagon::before{content:"\f41a"}
.bi-hexagon-fill::before{content:"\f41b"}
.bi-hexagon-half::before{content:"\f41c"}
.bi-hexagon::before{content:"\f41d"}
.bi-hourglass-bottom::before{content:"\f41e"}
.bi-hourglass-split::before{content:"\f41f"}
.bi-hourglass-top::before{content:"\f420"}
.bi-hourglass::before{content:"\f421"}
.bi-house-door-fill::before{content:"\f422"}
.bi-house-door::before{content:"\f423"}
.bi-house-fill::before{content:"\f424"}
.bi-house::before{content:"\f425"}
.bi-hr::before{content:"\f426"}
.bi-hurricane::before{content:"\f427"}
.bi-image-alt::before{content:"\f428"}
.bi-image-fill::before{content:"\f429"}
.bi-image::before{content:"\f42a"}
.bi-images::before{content:"\f42b"}
.bi-inbox-fill::before{content:"\f42c"}
.bi-inbox::before{content:"\f42d"}
.bi-inboxes-fill::before{content:"\f42e"}
.bi-inboxes::before{content:"\f42f"}
.bi-info-circle-fill::before{content:"\f430"}
.bi-info-circle::before{content:"\f431"}
.bi-info-square-fill::before{content:"\f432"}
.bi-info-square::before{content:"\f433"}
.bi-info::before{content:"\f434"}
.bi-input-cursor-text::before{content:"\f435"}
.bi-input-cursor::before{content:"\f436"}
.bi-instagram::before{content:"\f437"}
.bi-intersect::before{content:"\f438"}
.bi-journal-album::before{content:"\f439"}
.bi-journal-arrow-down::before{content:"\f43a"}
.bi-journal-arrow-up::before{content:"\f43b"}
.bi-journal-bookmark-fill::before{content:"\f43c"}
.bi-journal-bookmark::before{content:"\f43d"}
.bi-journal-check::before{content:"\f43e"}
.bi-journal-code::before{content:"\f43f"}
.bi-journal-medical::before{content:"\f440"}
.bi-journal-minus::before{content:"\f441"}
.bi-journal-plus::before{content:"\f442"}
.bi-journal-richtext::before{content:"\f443"}
.bi-journal-text::before{content:"\f444"}
.bi-journal-x::before{content:"\f445"}
.bi-journal::before{content:"\f446"}
.bi-journals::before{content:"\f447"}
.bi-joystick::before{content:"\f448"}
.bi-justify-left::before{content:"\f449"}
.bi-justify-right::before{content:"\f44a"}
.bi-justify::before{content:"\f44b"}
.bi-kanban-fill::before{content:"\f44c"}
.bi-kanban::before{content:"\f44d"}
.bi-key-fill::before{content:"\f44e"}
.bi-key::before{content:"\f44f"}
.bi-keyboard-fill::before{content:"\f450"}
.bi-keyboard::before{content:"\f451"}
.bi-ladder::before{content:"\f452"}
.bi-lamp-fill::before{content:"\f453"}
.bi-lamp::before{content:"\f454"}
.bi-laptop-fill::before{content:"\f455"}
.bi-laptop::before{content:"\f456"}
.bi-layer-backward::before{content:"\f457"}
.bi-layer-forward::before{content:"\f458"}
.bi-layers-fill::before{content:"\f459"}
.bi-layers-half::before{content:"\f45a"}
.bi-layers::before{content:"\f45b"}
.bi-layout-sidebar-inset-reverse::before{content:"\f45c"}
.bi-layout-sidebar-inset::before{content:"\f45d"}
.bi-layout-sidebar-reverse::before{content:"\f45e"}
.bi-layout-sidebar::before{content:"\f45f"}
.bi-layout-split::before{content:"\f460"}
.bi-layout-text-sidebar-reverse::before{content:"\f461"}
.bi-layout-text-sidebar::before{content:"\f462"}
.bi-layout-text-window-reverse::before{content:"\f463"}
.bi-layout-text-window::before{content:"\f464"}
.bi-layout-three-columns::before{content:"\f465"}
.bi-layout-wtf::before{content:"\f466"}
.bi-life-preserver::before{content:"\f467"}
.bi-lightbulb-fill::before{content:"\f468"}
.bi-lightbulb-off-fill::before{content:"\f469"}
.bi-lightbulb-off::before{content:"\f46a"}
.bi-lightbulb::before{content:"\f46b"}
.bi-lightning-charge-fill::before{content:"\f46c"}
.bi-lightning-charge::before{content:"\f46d"}
.bi-lightning-fill::before{content:"\f46e"}
.bi-lightning::before{content:"\f46f"}
.bi-link-45deg::before{content:"\f470"}
.bi-link::before{content:"\f471"}
.bi-linkedin::before{content:"\f472"}
.bi-list-check::before{content:"\f473"}
.bi-list-nested::before{content:"\f474"}
.bi-list-ol::before{content:"\f475"}
.bi-list-stars::before{content:"\f476"}
.bi-list-task::before{content:"\f477"}
.bi-list-ul::before{content:"\f478"}
.bi-list::before{content:"\f479"}
.bi-lock-fill::before{content:"\f47a"}
.bi-lock::before{content:"\f47b"}
.bi-mailbox::before{content:"\f47c"}
.bi-mailbox2::before{content:"\f47d"}
.bi-map-fill::before{content:"\f47e"}
.bi-map::before{content:"\f47f"}
.bi-markdown-fill::before{content:"\f480"}
.bi-markdown::before{content:"\f481"}
.bi-mask::before{content:"\f482"}
.bi-megaphone-fill::before{content:"\f483"}
.bi-megaphone::before{content:"\f484"}
.bi-menu-app-fill::before{content:"\f485"}
.bi-menu-app::before{content:"\f486"}
.bi-menu-button-fill::before{content:"\f487"}
.bi-menu-button-wide-fill::before{content:"\f488"}
.bi-menu-button-wide::before{content:"\f489"}
.bi-menu-button::before{content:"\f48a"}
.bi-menu-down::before{content:"\f48b"}
.bi-menu-up::before{content:"\f48c"}
.bi-mic-fill::before{content:"\f48d"}
.bi-mic-mute-fill::before{content:"\f48e"}
.bi-mic-mute::before{content:"\f48f"}
.bi-mic::before{content:"\f490"}
.bi-minecart-loaded::before{content:"\f491"}
.bi-minecart::before{content:"\f492"}
.bi-moisture::before{content:"\f493"}
.bi-moon-fill::before{content:"\f494"}
.bi-moon-stars-fill::before{content:"\f495"}
.bi-moon-stars::before{content:"\f496"}
.bi-moon::before{content:"\f497"}
.bi-mouse-fill::before{content:"\f498"}
.bi-mouse::before{content:"\f499"}
.bi-mouse2-fill::before{content:"\f49a"}
.bi-mouse2::before{content:"\f49b"}
.bi-mouse3-fill::before{content:"\f49c"}
.bi-mouse3::before{content:"\f49d"}
.bi-music-note-beamed::before{content:"\f49e"}
.bi-music-note-list::before{content:"\f49f"}
.bi-music-note::before{content:"\f4a0"}
.bi-music-player-fill::before{content:"\f4a1"}
.bi-music-player::before{content:"\f4a2"}
.bi-newspaper::before{content:"\f4a3"}
.bi-node-minus-fill::before{content:"\f4a4"}
.bi-node-minus::before{content:"\f4a5"}
.bi-node-plus-fill::before{content:"\f4a6"}
.bi-node-plus::before{content:"\f4a7"}
.bi-nut-fill::before{content:"\f4a8"}
.bi-nut::before{content:"\f4a9"}
.bi-octagon-fill::before{content:"\f4aa"}
.bi-octagon-half::before{content:"\f4ab"}
.bi-octagon::before{content:"\f4ac"}
.bi-option::before{content:"\f4ad"}
.bi-outlet::before{content:"\f4ae"}
.bi-paint-bucket::before{content:"\f4af"}
.bi-palette-fill::before{content:"\f4b0"}
.bi-palette::before{content:"\f4b1"}
.bi-palette2::before{content:"\f4b2"}
.bi-paperclip::before{content:"\f4b3"}
.bi-paragraph::before{content:"\f4b4"}
.bi-patch-check-fill::before{content:"\f4b5"}
.bi-patch-check::before{content:"\f4b6"}
.bi-patch-exclamation-fill::before{content:"\f4b7"}
.bi-patch-exclamation::before{content:"\f4b8"}
.bi-patch-minus-fill::before{content:"\f4b9"}
.bi-patch-minus::before{content:"\f4ba"}
.bi-patch-plus-fill::before{content:"\f4bb"}
.bi-patch-plus::before{content:"\f4bc"}
.bi-patch-question-fill::before{content:"\f4bd"}
.bi-patch-question::before{content:"\f4be"}
.bi-pause-btn-fill::before{content:"\f4bf"}
.bi-pause-btn::before{content:"\f4c0"}
.bi-pause-circle-fill::before{content:"\f4c1"}
.bi-pause-circle::before{content:"\f4c2"}
.bi-pause-fill::before{content:"\f4c3"}
.bi-pause::before{content:"\f4c4"}
.bi-peace-fill::before{content:"\f4c5"}
.bi-peace::before{content:"\f4c6"}
.bi-pen-fill::before{content:"\f4c7"}
.bi-pen::before{content:"\f4c8"}
.bi-pencil-fill::before{content:"\f4c9"}
.bi-pencil-square::before{content:"\f4ca"}
.bi-pencil::before{content:"\f4cb"}
.bi-pentagon-fill::before{content:"\f4cc"}
.bi-pentagon-half::before{content:"\f4cd"}
.bi-pentagon::before{content:"\f4ce"}
.bi-people-fill::before{content:"\f4cf"}
.bi-people::before{content:"\f4d0"}
.bi-percent::before{content:"\f4d1"}
.bi-person-badge-fill::before{content:"\f4d2"}
.bi-person-badge::before{content:"\f4d3"}
.bi-person-bounding-box::before{content:"\f4d4"}
.bi-person-check-fill::before{content:"\f4d5"}
.bi-person-check::before{content:"\f4d6"}
.bi-person-circle::before{content:"\f4d7"}
.bi-person-dash-fill::before{content:"\f4d8"}
.bi-person-dash::before{content:"\f4d9"}
.bi-person-fill::before{content:"\f4da"}
.bi-person-lines-fill::before{content:"\f4db"}
.bi-person-plus-fill::before{content:"\f4dc"}
.bi-person-plus::before{content:"\f4dd"}
.bi-person-square::before{content:"\f4de"}
.bi-person-x-fill::before{content:"\f4df"}
.bi-person-x::before{content:"\f4e0"}
.bi-person::before{content:"\f4e1"}
.bi-phone-fill::before{content:"\f4e2"}
.bi-phone-landscape-fill::before{content:"\f4e3"}
.bi-phone-landscape::before{content:"\f4e4"}
.bi-phone-vibrate-fill::before{content:"\f4e5"}
.bi-phone-vibrate::before{content:"\f4e6"}
.bi-phone::before{content:"\f4e7"}
.bi-pie-chart-fill::before{content:"\f4e8"}
.bi-pie-chart::before{content:"\f4e9"}
.bi-pin-angle-fill::before{content:"\f4ea"}
.bi-pin-angle::before{content:"\f4eb"}
.bi-pin-fill::before{content:"\f4ec"}
.bi-pin::before{content:"\f4ed"}
.bi-pip-fill::before{content:"\f4ee"}
.bi-pip::before{content:"\f4ef"}
.bi-play-btn-fill::before{content:"\f4f0"}
.bi-play-btn::before{content:"\f4f1"}
.bi-play-circle-fill::before{content:"\f4f2"}
.bi-play-circle::before{content:"\f4f3"}
.bi-play-fill::before{content:"\f4f4"}
.bi-play::before{content:"\f4f5"}
.bi-plug-fill::before{content:"\f4f6"}
.bi-plug::before{content:"\f4f7"}
.bi-plus-circle-dotted::before{content:"\f4f8"}
.bi-plus-circle-fill::before{content:"\f4f9"}
.bi-plus-circle::before{content:"\f4fa"}
.bi-plus-square-dotted::before{content:"\f4fb"}
.bi-plus-square-fill::before{content:"\f4fc"}
.bi-plus-square::before{content:"\f4fd"}
.bi-plus::before{content:"\f4fe"}
.bi-power::before{content:"\f4ff"}
.bi-printer-fill::before{content:"\f500"}
.bi-printer::before{content:"\f501"}
.bi-puzzle-fill::before{content:"\f502"}
.bi-puzzle::before{content:"\f503"}
.bi-question-circle-fill::before{content:"\f504"}
.bi-question-circle::before{content:"\f505"}
.bi-question-diamond-fill::before{content:"\f506"}
.bi-question-diamond::before{content:"\f507"}
.bi-question-octagon-fill::before{content:"\f508"}
.bi-question-octagon::before{content:"\f509"}
.bi-question-square-fill::before{content:"\f50a"}
.bi-question-square::before{content:"\f50b"}
.bi-question::before{content:"\f50c"}
.bi-rainbow::before{content:"\f50d"}
.bi-receipt-cutoff::before{content:"\f50e"}
.bi-receipt::before{content:"\f50f"}
.bi-reception-0::before{content:"\f510"}
.bi-reception-1::before{content:"\f511"}
.bi-reception-2::before{content:"\f512"}
.bi-reception-3::before{content:"\f513"}
.bi-reception-4::before{content:"\f514"}
.bi-record-btn-fill::before{content:"\f515"}
.bi-record-btn::before{content:"\f516"}
.bi-record-circle-fill::before{content:"\f517"}
.bi-record-circle::before{content:"\f518"}
.bi-record-fill::before{content:"\f519"}
.bi-record::before{content:"\f51a"}
.bi-record2-fill::before{content:"\f51b"}
.bi-record2::before{content:"\f51c"}
.bi-reply-all-fill::before{content:"\f51d"}
.bi-reply-all::before{content:"\f51e"}
.bi-reply-fill::before{content:"\f51f"}
.bi-reply::before{content:"\f520"}
.bi-rss-fill::before{content:"\f521"}
.bi-rss::before{content:"\f522"}
.bi-rulers::before{content:"\f523"}
.bi-save-fill::before{content:"\f524"}
.bi-save::before{content:"\f525"}
.bi-save2-fill::before{content:"\f526"}
.bi-save2::before{content:"\f527"}
.bi-scissors::before{content:"\f528"}
.bi-screwdriver::before{content:"\f529"}
.bi-search::before{content:"\f52a"}
.bi-segmented-nav::before{content:"\f52b"}
.bi-server::before{content:"\f52c"}
.bi-share-fill::before{content:"\f52d"}
.bi-share::before{content:"\f52e"}
.bi-shield-check::before{content:"\f52f"}
.bi-shield-exclamation::before{content:"\f530"}
.bi-shield-fill-check::before{content:"\f531"}
.bi-shield-fill-exclamation::before{content:"\f532"}
.bi-shield-fill-minus::before{content:"\f533"}
.bi-shield-fill-plus::before{content:"\f534"}
.bi-shield-fill-x::before{content:"\f535"}
.bi-shield-fill::before{content:"\f536"}
.bi-shield-lock-fill::before{content:"\f537"}
.bi-shield-lock::before{content:"\f538"}
.bi-shield-minus::before{content:"\f539"}
.bi-shield-plus::before{content:"\f53a"}
.bi-shield-shaded::before{content:"\f53b"}
.bi-shield-slash-fill::before{content:"\f53c"}
.bi-shield-slash::before{content:"\f53d"}
.bi-shield-x::before{content:"\f53e"}
.bi-shield::before{content:"\f53f"}
.bi-shift-fill::before{content:"\f540"}
.bi-shift::before{content:"\f541"}
.bi-shop-window::before{content:"\f542"}
.bi-shop::before{content:"\f543"}
.bi-shuffle::before{content:"\f544"}
.bi-signpost-2-fill::before{content:"\f545"}
.bi-signpost-2::before{content:"\f546"}
.bi-signpost-fill::before{content:"\f547"}
.bi-signpost-split-fill::before{content:"\f548"}
.bi-signpost-split::before{content:"\f549"}
.bi-signpost::before{content:"\f54a"}
.bi-sim-fill::before{content:"\f54b"}
.bi-sim::before{content:"\f54c"}
.bi-skip-backward-btn-fill::before{content:"\f54d"}
.bi-skip-backward-btn::before{content:"\f54e"}
.bi-skip-backward-circle-fill::before{content:"\f54f"}
.bi-skip-backward-circle::before{content:"\f550"}
.bi-skip-backward-fill::before{content:"\f551"}
.bi-skip-backward::before{content:"\f552"}
.bi-skip-end-btn-fill::before{content:"\f553"}
.bi-skip-end-btn::before{content:"\f554"}
.bi-skip-end-circle-fill::before{content:"\f555"}
.bi-skip-end-circle::before{content:"\f556"}
.bi-skip-end-fill::before{content:"\f557"}
.bi-skip-end::before{content:"\f558"}
.bi-skip-forward-btn-fill::before{content:"\f559"}
.bi-skip-forward-btn::before{content:"\f55a"}
.bi-skip-forward-circle-fill::before{content:"\f55b"}
.bi-skip-forward-circle::before{content:"\f55c"}
.bi-skip-forward-fill::before{content:"\f55d"}
.bi-skip-forward::before{content:"\f55e"}
.bi-skip-start-btn-fill::before{content:"\f55f"}
.bi-skip-start-btn::before{content:"\f560"}
.bi-skip-start-circle-fill::before{content:"\f561"}
.bi-skip-start-circle::before{content:"\f562"}
.bi-skip-start-fill::before{content:"\f563"}
.bi-skip-start::before{content:"\f564"}
.bi-slack::before{content:"\f565"}
.bi-slash-circle-fill::before{content:"\f566"}
.bi-slash-circle::before{content:"\f567"}
.bi-slash-square-fill::before{content:"\f568"}
.bi-slash-square::before{content:"\f569"}
.bi-slash::before{content:"\f56a"}
.bi-sliders::before{content:"\f56b"}
.bi-smartwatch::before{content:"\f56c"}
.bi-snow::before{content:"\f56d"}
.bi-snow2::before{content:"\f56e"}
.bi-snow3::before{content:"\f56f"}
.bi-sort-alpha-down-alt::before{content:"\f570"}
.bi-sort-alpha-down::before{content:"\f571"}
.bi-sort-alpha-up-alt::before{content:"\f572"}
.bi-sort-alpha-up::before{content:"\f573"}
.bi-sort-down-alt::before{content:"\f574"}
.bi-sort-down::before{content:"\f575"}
.bi-sort-numeric-down-alt::before{content:"\f576"}
.bi-sort-numeric-down::before{content:"\f577"}
.bi-sort-numeric-up-alt::before{content:"\f578"}
.bi-sort-numeric-up::before{content:"\f579"}
.bi-sort-up-alt::before{content:"\f57a"}
.bi-sort-up::before{content:"\f57b"}
.bi-soundwave::before{content:"\f57c"}
.bi-speaker-fill::before{content:"\f57d"}
.bi-speaker::before{content:"\f57e"}
.bi-speedometer::before{content:"\f57f"}
.bi-speedometer2::before{content:"\f580"}
.bi-spellcheck::before{content:"\f581"}
.bi-square-fill::before{content:"\f582"}
.bi-square-half::before{content:"\f583"}
.bi-square::before{content:"\f584"}
.bi-stack::before{content:"\f585"}
.bi-star-fill::before{content:"\f586"}
.bi-star-half::before{content:"\f587"}
.bi-star::before{content:"\f588"}
.bi-stars::before{content:"\f589"}
.bi-stickies-fill::before{content:"\f58a"}
.bi-stickies::before{content:"\f58b"}
.bi-sticky-fill::before{content:"\f58c"}
.bi-sticky::before{content:"\f58d"}
.bi-stop-btn-fill::before{content:"\f58e"}
.bi-stop-btn::before{content:"\f58f"}
.bi-stop-circle-fill::before{content:"\f590"}
.bi-stop-circle::before{content:"\f591"}
.bi-stop-fill::before{content:"\f592"}
.bi-stop::before{content:"\f593"}
.bi-stoplights-fill::before{content:"\f594"}
.bi-stoplights::before{content:"\f595"}
.bi-stopwatch-fill::before{content:"\f596"}
.bi-stopwatch::before{content:"\f597"}
.bi-subtract::before{content:"\f598"}
.bi-suit-club-fill::before{content:"\f599"}
.bi-suit-club::before{content:"\f59a"}
.bi-suit-diamond-fill::before{content:"\f59b"}
.bi-suit-diamond::before{content:"\f59c"}
.bi-suit-heart-fill::before{content:"\f59d"}
.bi-suit-heart::before{content:"\f59e"}
.bi-suit-spade-fill::before{content:"\f59f"}
.bi-suit-spade::before{content:"\f5a0"}
.bi-sun-fill::before{content:"\f5a1"}
.bi-sun::before{content:"\f5a2"}
.bi-sunglasses::before{content:"\f5a3"}
.bi-sunrise-fill::before{content:"\f5a4"}
.bi-sunrise::before{content:"\f5a5"}
.bi-sunset-fill::before{content:"\f5a6"}
.bi-sunset::before{content:"\f5a7"}
.bi-symmetry-horizontal::before{content:"\f5a8"}
.bi-symmetry-vertical::before{content:"\f5a9"}
.bi-table::before{content:"\f5aa"}
.bi-tablet-fill::before{content:"\f5ab"}
.bi-tablet-landscape-fill::before{content:"\f5ac"}
.bi-tablet-landscape::before{content:"\f5ad"}
.bi-tablet::before{content:"\f5ae"}
.bi-tag-fill::before{content:"\f5af"}
.bi-tag::before{content:"\f5b0"}
.bi-tags-fill::before{content:"\f5b1"}
.bi-tags::before{content:"\f5b2"}
.bi-telegram::before{content:"\f5b3"}
.bi-telephone-fill::before{content:"\f5b4"}
.bi-telephone-forward-fill::before{content:"\f5b5"}
.bi-telephone-forward::before{content:"\f5b6"}
.bi-telephone-inbound-fill::before{content:"\f5b7"}
.bi-telephone-inbound::before{content:"\f5b8"}
.bi-telephone-minus-fill::before{content:"\f5b9"}
.bi-telephone-minus::before{content:"\f5ba"}
.bi-telephone-outbound-fill::before{content:"\f5bb"}
.bi-telephone-outbound::before{content:"\f5bc"}
.bi-telephone-plus-fill::before{content:"\f5bd"}
.bi-telephone-plus::before{content:"\f5be"}
.bi-telephone-x-fill::before{content:"\f5bf"}
.bi-telephone-x::before{content:"\f5c0"}
.bi-telephone::before{content:"\f5c1"}
.bi-terminal-fill::before{content:"\f5c2"}
.bi-terminal::before{content:"\f5c3"}
.bi-text-center::before{content:"\f5c4"}
.bi-text-indent-left::before{content:"\f5c5"}
.bi-text-indent-right::before{content:"\f5c6"}
.bi-text-left::before{content:"\f5c7"}
.bi-text-paragraph::before{content:"\f5c8"}
.bi-text-right::before{content:"\f5c9"}
.bi-textarea-resize::before{content:"\f5ca"}
.bi-textarea-t::before{content:"\f5cb"}
.bi-textarea::before{content:"\f5cc"}
.bi-thermometer-half::before{content:"\f5cd"}
.bi-thermometer-high::before{content:"\f5ce"}
.bi-thermometer-low::before{content:"\f5cf"}
.bi-thermometer-snow::before{content:"\f5d0"}
.bi-thermometer-sun::before{content:"\f5d1"}
.bi-thermometer::before{content:"\f5d2"}
.bi-three-dots-vertical::before{content:"\f5d3"}
.bi-three-dots::before{content:"\f5d4"}
.bi-toggle-off::before{content:"\f5d5"}
.bi-toggle-on::before{content:"\f5d6"}
.bi-toggle2-off::before{content:"\f5d7"}
.bi-toggle2-on::before{content:"\f5d8"}
.bi-toggles::before{content:"\f5d9"}
.bi-toggles2::before{content:"\f5da"}
.bi-tools::before{content:"\f5db"}
.bi-tornado::before{content:"\f5dc"}
.bi-trash-fill::before{content:"\f5dd"}
.bi-trash::before{content:"\f5de"}
.bi-trash2-fill::before{content:"\f5df"}
.bi-trash2::before{content:"\f5e0"}
.bi-tree-fill::before{content:"\f5e1"}
.bi-tree::before{content:"\f5e2"}
.bi-triangle-fill::before{content:"\f5e3"}
.bi-triangle-half::before{content:"\f5e4"}
.bi-triangle::before{content:"\f5e5"}
.bi-trophy-fill::before{content:"\f5e6"}
.bi-trophy::before{content:"\f5e7"}
.bi-tropical-storm::before{content:"\f5e8"}
.bi-truck-flatbed::before{content:"\f5e9"}
.bi-truck::before{content:"\f5ea"}
.bi-tsunami::before{content:"\f5eb"}
.bi-tv-fill::before{content:"\f5ec"}
.bi-tv::before{content:"\f5ed"}
.bi-twitch::before{content:"\f5ee"}
.bi-twitter::before{content:"\f5ef"}
.bi-type-bold::before{content:"\f5f0"}
.bi-type-h1::before{content:"\f5f1"}
.bi-type-h2::before{content:"\f5f2"}
.bi-type-h3::before{content:"\f5f3"}
.bi-type-italic::before{content:"\f5f4"}
.bi-type-strikethrough::before{content:"\f5f5"}
.bi-type-underline::before{content:"\f5f6"}
.bi-type::before{content:"\f5f7"}
.bi-ui-checks-grid::before{content:"\f5f8"}
.bi-ui-checks::before{content:"\f5f9"}
.bi-ui-radios-grid::before{content:"\f5fa"}
.bi-ui-radios::before{content:"\f5fb"}
.bi-umbrella-fill::before{content:"\f5fc"}
.bi-umbrella::before{content:"\f5fd"}
.bi-union::before{content:"\f5fe"}
.bi-unlock-fill::before{content:"\f5ff"}
.bi-unlock::before{content:"\f600"}
.bi-upc-scan::before{content:"\f601"}
.bi-upc::before{content:"\f602"}
.bi-upload::before{content:"\f603"}
.bi-vector-pen::before{content:"\f604"}
.bi-view-list::before{content:"\f605"}
.bi-view-stacked::before{content:"\f606"}
.bi-vinyl-fill::before{content:"\f607"}
.bi-vinyl::before{content:"\f608"}
.bi-voicemail::before{content:"\f609"}
.bi-volume-down-fill::before{content:"\f60a"}
.bi-volume-down::before{content:"\f60b"}
.bi-volume-mute-fill::before{content:"\f60c"}
.bi-volume-mute::before{content:"\f60d"}
.bi-volume-off-fill::before{content:"\f60e"}
.bi-volume-off::before{content:"\f60f"}
.bi-volume-up-fill::before{content:"\f610"}
.bi-volume-up::before{content:"\f611"}
.bi-vr::before{content:"\f612"}
.bi-wallet-fill::before{content:"\f613"}
.bi-wallet::before{content:"\f614"}
.bi-wallet2::before{content:"\f615"}
.bi-watch::before{content:"\f616"}
.bi-water::before{content:"\f617"}
.bi-whatsapp::before{content:"\f618"}
.bi-wifi-1::before{content:"\f619"}
.bi-wifi-2::before{content:"\f61a"}
.bi-wifi-off::before{content:"\f61b"}
.bi-wifi::before{content:"\f61c"}
.bi-wind::before{content:"\f61d"}
.bi-window-dock::before{content:"\f61e"}
.bi-window-sidebar::before{content:"\f61f"}
.bi-window::before{content:"\f620"}
.bi-wrench::before{content:"\f621"}
.bi-x-circle-fill::before{content:"\f622"}
.bi-x-circle::before{content:"\f623"}
.bi-x-diamond-fill::before{content:"\f624"}
.bi-x-diamond::before{content:"\f625"}
.bi-x-octagon-fill::before{content:"\f626"}
.bi-x-octagon::before{content:"\f627"}
.bi-x-square-fill::before{content:"\f628"}
.bi-x-square::before{content:"\f629"}
.bi-x::before{content:"\f62a"}
.bi-youtube::before{content:"\f62b"}
.bi-zoom-in::before{content:"\f62c"}
.bi-zoom-out::before{content:"\f62d"}
.bi-bank::before{content:"\f62e"}
.bi-bank2::before{content:"\f62f"}
.bi-bell-slash-fill::before{content:"\f630"}
.bi-bell-slash::before{content:"\f631"}
.bi-cash-coin::before{content:"\f632"}
.bi-check-lg::before{content:"\f633"}
.bi-coin::before{content:"\f634"}
.bi-currency-bitcoin::before{content:"\f635"}
.bi-currency-dollar::before{content:"\f636"}
.bi-currency-euro::before{content:"\f637"}
.bi-currency-exchange::before{content:"\f638"}
.bi-currency-pound::before{content:"\f639"}
.bi-currency-yen::before{content:"\f63a"}
.bi-dash-lg::before{content:"\f63b"}
.bi-exclamation-lg::before{content:"\f63c"}
.bi-file-earmark-pdf-fill::before{content:"\f63d"}
.bi-file-earmark-pdf::before{content:"\f63e"}
.bi-file-pdf-fill::before{content:"\f63f"}
.bi-file-pdf::before{content:"\f640"}
.bi-gender-ambiguous::before{content:"\f641"}
.bi-gender-female::before{content:"\f642"}
.bi-gender-male::before{content:"\f643"}
.bi-gender-trans::before{content:"\f644"}
.bi-headset-vr::before{content:"\f645"}
.bi-info-lg::before{content:"\f646"}
.bi-mastodon::before{content:"\f647"}
.bi-messenger::before{content:"\f648"}
.bi-piggy-bank-fill::before{content:"\f649"}
.bi-piggy-bank::before{content:"\f64a"}
.bi-pin-map-fill::before{content:"\f64b"}
.bi-pin-map::before{content:"\f64c"}
.bi-plus-lg::before{content:"\f64d"}
.bi-question-lg::before{content:"\f64e"}
.bi-recycle::before{content:"\f64f"}
.bi-reddit::before{content:"\f650"}
.bi-safe-fill::before{content:"\f651"}
.bi-safe2-fill::before{content:"\f652"}
.bi-safe2::before{content:"\f653"}
.bi-sd-card-fill::before{content:"\f654"}
.bi-sd-card::before{content:"\f655"}
.bi-skype::before{content:"\f656"}
.bi-slash-lg::before{content:"\f657"}
.bi-translate::before{content:"\f658"}
.bi-x-lg::before{content:"\f659"}
.bi-safe::before{content:"\f65a"}
.bi-apple::before{content:"\f65b"}
.bi-microsoft::before{content:"\f65d"}
.bi-windows::before{content:"\f65e"}
.bi-behance::before{content:"\f65c"}
.bi-dribbble::before{content:"\f65f"}
.bi-line::before{content:"\f660"}
.bi-medium::before{content:"\f661"}
.bi-paypal::before{content:"\f662"}
.bi-pinterest::before{content:"\f663"}
.bi-signal::before{content:"\f664"}
.bi-snapchat::before{content:"\f665"}
.bi-spotify::before{content:"\f666"}
.bi-stack-overflow::before{content:"\f667"}
.bi-strava::before{content:"\f668"}
.bi-wordpress::before{content:"\f669"}
.bi-vimeo::before{content:"\f66a"}
.bi-activity::before{content:"\f66b"}
.bi-easel2-fill::before{content:"\f66c"}
.bi-easel2::before{content:"\f66d"}
.bi-easel3-fill::before{content:"\f66e"}
.bi-easel3::before{content:"\f66f"}
.bi-fan::before{content:"\f670"}
.bi-fingerprint::before{content:"\f671"}
.bi-graph-down-arrow::before{content:"\f672"}
.bi-graph-up-arrow::before{content:"\f673"}
.bi-hypnotize::before{content:"\f674"}
.bi-magic::before{content:"\f675"}
.bi-person-rolodex::before{content:"\f676"}
.bi-person-video::before{content:"\f677"}
.bi-person-video2::before{content:"\f678"}
.bi-person-video3::before{content:"\f679"}
.bi-person-workspace::before{content:"\f67a"}
.bi-radioactive::before{content:"\f67b"}
.bi-webcam-fill::before{content:"\f67c"}
.bi-webcam::before{content:"\f67d"}
.bi-yin-yang::before{content:"\f67e"}
.bi-bandaid-fill::before{content:"\f680"}
.bi-bandaid::before{content:"\f681"}
.bi-bluetooth::before{content:"\f682"}
.bi-body-text::before{content:"\f683"}
.bi-boombox::before{content:"\f684"}
.bi-boxes::before{content:"\f685"}
.bi-dpad-fill::before{content:"\f686"}
.bi-dpad::before{content:"\f687"}
.bi-ear-fill::before{content:"\f688"}
.bi-ear::before{content:"\f689"}
.bi-envelope-check-fill::before{content:"\f68b"}
.bi-envelope-check::before{content:"\f68c"}
.bi-envelope-dash-fill::before{content:"\f68e"}
.bi-envelope-dash::before{content:"\f68f"}
.bi-envelope-exclamation-fill::before{content:"\f691"}
.bi-envelope-exclamation::before{content:"\f692"}
.bi-envelope-plus-fill::before{content:"\f693"}
.bi-envelope-plus::before{content:"\f694"}
.bi-envelope-slash-fill::before{content:"\f696"}
.bi-envelope-slash::before{content:"\f697"}
.bi-envelope-x-fill::before{content:"\f699"}
.bi-envelope-x::before{content:"\f69a"}
.bi-explicit-fill::before{content:"\f69b"}
.bi-explicit::before{content:"\f69c"}
.bi-git::before{content:"\f69d"}
.bi-infinity::before{content:"\f69e"}
.bi-list-columns-reverse::before{content:"\f69f"}
.bi-list-columns::before{content:"\f6a0"}
.bi-meta::before{content:"\f6a1"}
.bi-nintendo-switch::before{content:"\f6a4"}
.bi-pc-display-horizontal::before{content:"\f6a5"}
.bi-pc-display::before{content:"\f6a6"}
.bi-pc-horizontal::before{content:"\f6a7"}
.bi-pc::before{content:"\f6a8"}
.bi-playstation::before{content:"\f6a9"}
.bi-plus-slash-minus::before{content:"\f6aa"}
.bi-projector-fill::before{content:"\f6ab"}
.bi-projector::before{content:"\f6ac"}
.bi-qr-code-scan::before{content:"\f6ad"}
.bi-qr-code::before{content:"\f6ae"}
.bi-quora::before{content:"\f6af"}
.bi-quote::before{content:"\f6b0"}
.bi-robot::before{content:"\f6b1"}
.bi-send-check-fill::before{content:"\f6b2"}
.bi-send-check::before{content:"\f6b3"}
.bi-send-dash-fill::before{content:"\f6b4"}
.bi-send-dash::before{content:"\f6b5"}
.bi-send-exclamation-fill::before{content:"\f6b7"}
.bi-send-exclamation::before{content:"\f6b8"}
.bi-send-fill::before{content:"\f6b9"}
.bi-send-plus-fill::before{content:"\f6ba"}
.bi-send-plus::before{content:"\f6bb"}
.bi-send-slash-fill::before{content:"\f6bc"}
.bi-send-slash::before{content:"\f6bd"}
.bi-send-x-fill::before{content:"\f6be"}
.bi-send-x::before{content:"\f6bf"}
.bi-send::before{content:"\f6c0"}
.bi-steam::before{content:"\f6c1"}
.bi-terminal-dash::before{content:"\f6c3"}
.bi-terminal-plus::before{content:"\f6c4"}
.bi-terminal-split::before{content:"\f6c5"}
.bi-ticket-detailed-fill::before{content:"\f6c6"}
.bi-ticket-detailed::before{content:"\f6c7"}
.bi-ticket-fill::before{content:"\f6c8"}
.bi-ticket-perforated-fill::before{content:"\f6c9"}
.bi-ticket-perforated::before{content:"\f6ca"}
.bi-ticket::before{content:"\f6cb"}
.bi-tiktok::before{content:"\f6cc"}
.bi-window-dash::before{content:"\f6cd"}
.bi-window-desktop::before{content:"\f6ce"}
.bi-window-fullscreen::before{content:"\f6cf"}
.bi-window-plus::before{content:"\f6d0"}
.bi-window-split::before{content:"\f6d1"}
.bi-window-stack::before{content:"\f6d2"}
.bi-window-x::before{content:"\f6d3"}
.bi-xbox::before{content:"\f6d4"}
.bi-ethernet::before{content:"\f6d5"}
.bi-hdmi-fill::before{content:"\f6d6"}
.bi-hdmi::before{content:"\f6d7"}
.bi-usb-c-fill::before{content:"\f6d8"}
.bi-usb-c::before{content:"\f6d9"}
.bi-usb-fill::before{content:"\f6da"}
.bi-usb-plug-fill::before{content:"\f6db"}
.bi-usb-plug::before{content:"\f6dc"}
.bi-usb-symbol::before{content:"\f6dd"}
.bi-usb::before{content:"\f6de"}
.bi-boombox-fill::before{content:"\f6df"}
.bi-displayport::before{content:"\f6e1"}
.bi-gpu-card::before{content:"\f6e2"}
.bi-memory::before{content:"\f6e3"}
.bi-modem-fill::before{content:"\f6e4"}
.bi-modem::before{content:"\f6e5"}
.bi-motherboard-fill::before{content:"\f6e6"}
.bi-motherboard::before{content:"\f6e7"}
.bi-optical-audio-fill::before{content:"\f6e8"}
.bi-optical-audio::before{content:"\f6e9"}
.bi-pci-card::before{content:"\f6ea"}
.bi-router-fill::before{content:"\f6eb"}
.bi-router::before{content:"\f6ec"}
.bi-thunderbolt-fill::before{content:"\f6ef"}
.bi-thunderbolt::before{content:"\f6f0"}
.bi-usb-drive-fill::before{content:"\f6f1"}
.bi-usb-drive::before{content:"\f6f2"}
.bi-usb-micro-fill::before{content:"\f6f3"}
.bi-usb-micro::before{content:"\f6f4"}
.bi-usb-mini-fill::before{content:"\f6f5"}
.bi-usb-mini::before{content:"\f6f6"}
.bi-cloud-haze2::before{content:"\f6f7"}
.bi-device-hdd-fill::before{content:"\f6f8"}
.bi-device-hdd::before{content:"\f6f9"}
.bi-device-ssd-fill::before{content:"\f6fa"}
.bi-device-ssd::before{content:"\f6fb"}
.bi-displayport-fill::before{content:"\f6fc"}
.bi-mortarboard-fill::before{content:"\f6fd"}
.bi-mortarboard::before{content:"\f6fe"}
.bi-terminal-x::before{content:"\f6ff"}
.bi-arrow-through-heart-fill::before{content:"\f700"}
.bi-arrow-through-heart::before{content:"\f701"}
.bi-badge-sd-fill::before{content:"\f702"}
.bi-badge-sd::before{content:"\f703"}
.bi-bag-heart-fill::before{content:"\f704"}
.bi-bag-heart::before{content:"\f705"}
.bi-balloon-fill::before{content:"\f706"}
.bi-balloon-heart-fill::before{content:"\f707"}
.bi-balloon-heart::before{content:"\f708"}
.bi-balloon::before{content:"\f709"}
.bi-box2-fill::before{content:"\f70a"}
.bi-box2-heart-fill::before{content:"\f70b"}
.bi-box2-heart::before{content:"\f70c"}
.bi-box2::before{content:"\f70d"}
.bi-braces-asterisk::before{content:"\f70e"}
.bi-calendar-heart-fill::before{content:"\f70f"}
.bi-calendar-heart::before{content:"\f710"}
.bi-calendar2-heart-fill::before{content:"\f711"}
.bi-calendar2-heart::before{content:"\f712"}
.bi-chat-heart-fill::before{content:"\f713"}
.bi-chat-heart::before{content:"\f714"}
.bi-chat-left-heart-fill::before{content:"\f715"}
.bi-chat-left-heart::before{content:"\f716"}
.bi-chat-right-heart-fill::before{content:"\f717"}
.bi-chat-right-heart::before{content:"\f718"}
.bi-chat-square-heart-fill::before{content:"\f719"}
.bi-chat-square-heart::before{content:"\f71a"}
.bi-clipboard-check-fill::before{content:"\f71b"}
.bi-clipboard-data-fill::before{content:"\f71c"}
.bi-clipboard-fill::before{content:"\f71d"}
.bi-clipboard-heart-fill::before{content:"\f71e"}
.bi-clipboard-heart::before{content:"\f71f"}
.bi-clipboard-minus-fill::before{content:"\f720"}
.bi-clipboard-plus-fill::before{content:"\f721"}
.bi-clipboard-pulse::before{content:"\f722"}
.bi-clipboard-x-fill::before{content:"\f723"}
.bi-clipboard2-check-fill::before{content:"\f724"}
.bi-clipboard2-check::before{content:"\f725"}
.bi-clipboard2-data-fill::before{content:"\f726"}
.bi-clipboard2-data::before{content:"\f727"}
.bi-clipboard2-fill::before{content:"\f728"}
.bi-clipboard2-heart-fill::before{content:"\f729"}
.bi-clipboard2-heart::before{content:"\f72a"}
.bi-clipboard2-minus-fill::before{content:"\f72b"}
.bi-clipboard2-minus::before{content:"\f72c"}
.bi-clipboard2-plus-fill::before{content:"\f72d"}
.bi-clipboard2-plus::before{content:"\f72e"}
.bi-clipboard2-pulse-fill::before{content:"\f72f"}
.bi-clipboard2-pulse::before{content:"\f730"}
.bi-clipboard2-x-fill::before{content:"\f731"}
.bi-clipboard2-x::before{content:"\f732"}
.bi-clipboard2::before{content:"\f733"}
.bi-emoji-kiss-fill::before{content:"\f734"}
.bi-emoji-kiss::before{content:"\f735"}
.bi-envelope-heart-fill::before{content:"\f736"}
.bi-envelope-heart::before{content:"\f737"}
.bi-envelope-open-heart-fill::before{content:"\f738"}
.bi-envelope-open-heart::before{content:"\f739"}
.bi-envelope-paper-fill::before{content:"\f73a"}
.bi-envelope-paper-heart-fill::before{content:"\f73b"}
.bi-envelope-paper-heart::before{content:"\f73c"}
.bi-envelope-paper::before{content:"\f73d"}
.bi-filetype-aac::before{content:"\f73e"}
.bi-filetype-ai::before{content:"\f73f"}
.bi-filetype-bmp::before{content:"\f740"}
.bi-filetype-cs::before{content:"\f741"}
.bi-filetype-css::before{content:"\f742"}
.bi-filetype-csv::before{content:"\f743"}
.bi-filetype-doc::before{content:"\f744"}
.bi-filetype-docx::before{content:"\f745"}
.bi-filetype-exe::before{content:"\f746"}
.bi-filetype-gif::before{content:"\f747"}
.bi-filetype-heic::before{content:"\f748"}
.bi-filetype-html::before{content:"\f749"}
.bi-filetype-java::before{content:"\f74a"}
.bi-filetype-jpg::before{content:"\f74b"}
.bi-filetype-js::before{content:"\f74c"}
.bi-filetype-jsx::before{content:"\f74d"}
.bi-filetype-key::before{content:"\f74e"}
.bi-filetype-m4p::before{content:"\f74f"}
.bi-filetype-md::before{content:"\f750"}
.bi-filetype-mdx::before{content:"\f751"}
.bi-filetype-mov::before{content:"\f752"}
.bi-filetype-mp3::before{content:"\f753"}
.bi-filetype-mp4::before{content:"\f754"}
.bi-filetype-otf::before{content:"\f755"}
.bi-filetype-pdf::before{content:"\f756"}
.bi-filetype-php::before{content:"\f757"}
.bi-filetype-png::before{content:"\f758"}
.bi-filetype-ppt::before{content:"\f75a"}
.bi-filetype-psd::before{content:"\f75b"}
.bi-filetype-py::before{content:"\f75c"}
.bi-filetype-raw::before{content:"\f75d"}
.bi-filetype-rb::before{content:"\f75e"}
.bi-filetype-sass::before{content:"\f75f"}
.bi-filetype-scss::before{content:"\f760"}
.bi-filetype-sh::before{content:"\f761"}
.bi-filetype-svg::before{content:"\f762"}
.bi-filetype-tiff::before{content:"\f763"}
.bi-filetype-tsx::before{content:"\f764"}
.bi-filetype-ttf::before{content:"\f765"}
.bi-filetype-txt::before{content:"\f766"}
.bi-filetype-wav::before{content:"\f767"}
.bi-filetype-woff::before{content:"\f768"}
.bi-filetype-xls::before{content:"\f76a"}
.bi-filetype-xml::before{content:"\f76b"}
.bi-filetype-yml::before{content:"\f76c"}
.bi-heart-arrow::before{content:"\f76d"}
.bi-heart-pulse-fill::before{content:"\f76e"}
.bi-heart-pulse::before{content:"\f76f"}
.bi-heartbreak-fill::before{content:"\f770"}
.bi-heartbreak::before{content:"\f771"}
.bi-hearts::before{content:"\f772"}
.bi-hospital-fill::before{content:"\f773"}
.bi-hospital::before{content:"\f774"}
.bi-house-heart-fill::before{content:"\f775"}
.bi-house-heart::before{content:"\f776"}
.bi-incognito::before{content:"\f777"}
.bi-magnet-fill::before{content:"\f778"}
.bi-magnet::before{content:"\f779"}
.bi-person-heart::before{content:"\f77a"}
.bi-person-hearts::before{content:"\f77b"}
.bi-phone-flip::before{content:"\f77c"}
.bi-plugin::before{content:"\f77d"}
.bi-postage-fill::before{content:"\f77e"}
.bi-postage-heart-fill::before{content:"\f77f"}
.bi-postage-heart::before{content:"\f780"}
.bi-postage::before{content:"\f781"}
.bi-postcard-fill::before{content:"\f782"}
.bi-postcard-heart-fill::before{content:"\f783"}
.bi-postcard-heart::before{content:"\f784"}
.bi-postcard::before{content:"\f785"}
.bi-search-heart-fill::before{content:"\f786"}
.bi-search-heart::before{content:"\f787"}
.bi-sliders2-vertical::before{content:"\f788"}
.bi-sliders2::before{content:"\f789"}
.bi-trash3-fill::before{content:"\f78a"}
.bi-trash3::before{content:"\f78b"}
.bi-valentine::before{content:"\f78c"}
.bi-valentine2::before{content:"\f78d"}
.bi-wrench-adjustable-circle-fill::before{content:"\f78e"}
.bi-wrench-adjustable-circle::before{content:"\f78f"}
.bi-wrench-adjustable::before{content:"\f790"}
.bi-filetype-json::before{content:"\f791"}
.bi-filetype-pptx::before{content:"\f792"}
.bi-filetype-xlsx::before{content:"\f793"}
.bi-1-circle-fill::before{content:"\f796"}
.bi-1-circle::before{content:"\f797"}
.bi-1-square-fill::before{content:"\f798"}
.bi-1-square::before{content:"\f799"}
.bi-2-circle-fill::before{content:"\f79c"}
.bi-2-circle::before{content:"\f79d"}
.bi-2-square-fill::before{content:"\f79e"}
.bi-2-square::before{content:"\f79f"}
.bi-3-circle-fill::before{content:"\f7a2"}
.bi-3-circle::before{content:"\f7a3"}
.bi-3-square-fill::before{content:"\f7a4"}
.bi-3-square::before{content:"\f7a5"}
.bi-4-circle-fill::before{content:"\f7a8"}
.bi-4-circle::before{content:"\f7a9"}
.bi-4-square-fill::before{content:"\f7aa"}
.bi-4-square::before{content:"\f7ab"}
.bi-5-circle-fill::before{content:"\f7ae"}
.bi-5-circle::before{content:"\f7af"}
.bi-5-square-fill::before{content:"\f7b0"}
.bi-5-square::before{content:"\f7b1"}
.bi-6-circle-fill::before{content:"\f7b4"}
.bi-6-circle::before{content:"\f7b5"}
.bi-6-square-fill::before{content:"\f7b6"}
.bi-6-square::before{content:"\f7b7"}
.bi-7-circle-fill::before{content:"\f7ba"}
.bi-7-circle::before{content:"\f7bb"}
.bi-7-square-fill::before{content:"\f7bc"}
.bi-7-square::before{content:"\f7bd"}
.bi-8-circle-fill::before{content:"\f7c0"}
.bi-8-circle::before{content:"\f7c1"}
.bi-8-square-fill::before{content:"\f7c2"}
.bi-8-square::before{content:"\f7c3"}
.bi-9-circle-fill::before{content:"\f7c6"}
.bi-9-circle::before{content:"\f7c7"}
.bi-9-square-fill::before{content:"\f7c8"}
.bi-9-square::before{content:"\f7c9"}
.bi-airplane-engines-fill::before{content:"\f7ca"}
.bi-airplane-engines::before{content:"\f7cb"}
.bi-airplane-fill::before{content:"\f7cc"}
.bi-airplane::before{content:"\f7cd"}
.bi-alexa::before{content:"\f7ce"}
.bi-alipay::before{content:"\f7cf"}
.bi-android::before{content:"\f7d0"}
.bi-android2::before{content:"\f7d1"}
.bi-box-fill::before{content:"\f7d2"}
.bi-box-seam-fill::before{content:"\f7d3"}
.bi-browser-chrome::before{content:"\f7d4"}
.bi-browser-edge::before{content:"\f7d5"}
.bi-browser-firefox::before{content:"\f7d6"}
.bi-browser-safari::before{content:"\f7d7"}
.bi-c-circle-fill::before{content:"\f7da"}
.bi-c-circle::before{content:"\f7db"}
.bi-c-square-fill::before{content:"\f7dc"}
.bi-c-square::before{content:"\f7dd"}
.bi-capsule-pill::before{content:"\f7de"}
.bi-capsule::before{content:"\f7df"}
.bi-car-front-fill::before{content:"\f7e0"}
.bi-car-front::before{content:"\f7e1"}
.bi-cassette-fill::before{content:"\f7e2"}
.bi-cassette::before{content:"\f7e3"}
.bi-cc-circle-fill::before{content:"\f7e6"}
.bi-cc-circle::before{content:"\f7e7"}
.bi-cc-square-fill::before{content:"\f7e8"}
.bi-cc-square::before{content:"\f7e9"}
.bi-cup-hot-fill::before{content:"\f7ea"}
.bi-cup-hot::before{content:"\f7eb"}
.bi-currency-rupee::before{content:"\f7ec"}
.bi-dropbox::before{content:"\f7ed"}
.bi-escape::before{content:"\f7ee"}
.bi-fast-forward-btn-fill::before{content:"\f7ef"}
.bi-fast-forward-btn::before{content:"\f7f0"}
.bi-fast-forward-circle-fill::before{content:"\f7f1"}
.bi-fast-forward-circle::before{content:"\f7f2"}
.bi-fast-forward-fill::before{content:"\f7f3"}
.bi-fast-forward::before{content:"\f7f4"}
.bi-filetype-sql::before{content:"\f7f5"}
.bi-fire::before{content:"\f7f6"}
.bi-google-play::before{content:"\f7f7"}
.bi-h-circle-fill::before{content:"\f7fa"}
.bi-h-circle::before{content:"\f7fb"}
.bi-h-square-fill::before{content:"\f7fc"}
.bi-h-square::before{content:"\f7fd"}
.bi-indent::before{content:"\f7fe"}
.bi-lungs-fill::before{content:"\f7ff"}
.bi-lungs::before{content:"\f800"}
.bi-microsoft-teams::before{content:"\f801"}
.bi-p-circle-fill::before{content:"\f804"}
.bi-p-circle::before{content:"\f805"}
.bi-p-square-fill::before{content:"\f806"}
.bi-p-square::before{content:"\f807"}
.bi-pass-fill::before{content:"\f808"}
.bi-pass::before{content:"\f809"}
.bi-prescription::before{content:"\f80a"}
.bi-prescription2::before{content:"\f80b"}
.bi-r-circle-fill::before{content:"\f80e"}
.bi-r-circle::before{content:"\f80f"}
.bi-r-square-fill::before{content:"\f810"}
.bi-r-square::before{content:"\f811"}
.bi-repeat-1::before{content:"\f812"}
.bi-repeat::before{content:"\f813"}
.bi-rewind-btn-fill::before{content:"\f814"}
.bi-rewind-btn::before{content:"\f815"}
.bi-rewind-circle-fill::before{content:"\f816"}
.bi-rewind-circle::before{content:"\f817"}
.bi-rewind-fill::before{content:"\f818"}
.bi-rewind::before{content:"\f819"}
.bi-train-freight-front-fill::before{content:"\f81a"}
.bi-train-freight-front::before{content:"\f81b"}
.bi-train-front-fill::before{content:"\f81c"}
.bi-train-front::before{content:"\f81d"}
.bi-train-lightrail-front-fill::before{content:"\f81e"}
.bi-train-lightrail-front::before{content:"\f81f"}
.bi-truck-front-fill::before{content:"\f820"}
.bi-truck-front::before{content:"\f821"}
.bi-ubuntu::before{content:"\f822"}
.bi-unindent::before{content:"\f823"}
.bi-unity::before{content:"\f824"}
.bi-universal-access-circle::before{content:"\f825"}
.bi-universal-access::before{content:"\f826"}
.bi-virus::before{content:"\f827"}
.bi-virus2::before{content:"\f828"}
.bi-wechat::before{content:"\f829"}
.bi-yelp::before{content:"\f82a"}
.bi-sign-stop-fill::before{content:"\f82b"}
.bi-sign-stop-lights-fill::before{content:"\f82c"}
.bi-sign-stop-lights::before{content:"\f82d"}
.bi-sign-stop::before{content:"\f82e"}
.bi-sign-turn-left-fill::before{content:"\f82f"}
.bi-sign-turn-left::before{content:"\f830"}
.bi-sign-turn-right-fill::before{content:"\f831"}
.bi-sign-turn-right::before{content:"\f832"}
.bi-sign-turn-slight-left-fill::before{content:"\f833"}
.bi-sign-turn-slight-left::before{content:"\f834"}
.bi-sign-turn-slight-right-fill::before{content:"\f835"}
.bi-sign-turn-slight-right::before{content:"\f836"}
.bi-sign-yield-fill::before{content:"\f837"}
.bi-sign-yield::before{content:"\f838"}
.bi-ev-station-fill::before{content:"\f839"}
.bi-ev-station::before{content:"\f83a"}
.bi-fuel-pump-diesel-fill::before{content:"\f83b"}
.bi-fuel-pump-diesel::before{content:"\f83c"}
.bi-fuel-pump-fill::before{content:"\f83d"}
.bi-fuel-pump::before{content:"\f83e"}
.bi-0-circle-fill::before{content:"\f83f"}
.bi-0-circle::before{content:"\f840"}
.bi-0-square-fill::before{content:"\f841"}
.bi-0-square::before{content:"\f842"}
.bi-rocket-fill::before{content:"\f843"}
.bi-rocket-takeoff-fill::before{content:"\f844"}
.bi-rocket-takeoff::before{content:"\f845"}
.bi-rocket::before{content:"\f846"}
.bi-stripe::before{content:"\f847"}
.bi-subscript::before{content:"\f848"}
.bi-superscript::before{content:"\f849"}
.bi-trello::before{content:"\f84a"}
.bi-envelope-at-fill::before{content:"\f84b"}
.bi-envelope-at::before{content:"\f84c"}
.bi-regex::before{content:"\f84d"}
.bi-text-wrap::before{content:"\f84e"}
.bi-sign-dead-end-fill::before{content:"\f84f"}
.bi-sign-dead-end::before{content:"\f850"}
.bi-sign-do-not-enter-fill::before{content:"\f851"}
.bi-sign-do-not-enter::before{content:"\f852"}
.bi-sign-intersection-fill::before{content:"\f853"}
.bi-sign-intersection-side-fill::before{content:"\f854"}
.bi-sign-intersection-side::before{content:"\f855"}
.bi-sign-intersection-t-fill::before{content:"\f856"}
.bi-sign-intersection-t::before{content:"\f857"}
.bi-sign-intersection-y-fill::before{content:"\f858"}
.bi-sign-intersection-y::before{content:"\f859"}
.bi-sign-intersection::before{content:"\f85a"}
.bi-sign-merge-left-fill::before{content:"\f85b"}
.bi-sign-merge-left::before{content:"\f85c"}
.bi-sign-merge-right-fill::before{content:"\f85d"}
.bi-sign-merge-right::before{content:"\f85e"}
.bi-sign-no-left-turn-fill::before{content:"\f85f"}
.bi-sign-no-left-turn::before{content:"\f860"}
.bi-sign-no-parking-fill::before{content:"\f861"}
.bi-sign-no-parking::before{content:"\f862"}
.bi-sign-no-right-turn-fill::before{content:"\f863"}
.bi-sign-no-right-turn::before{content:"\f864"}
.bi-sign-railroad-fill::before{content:"\f865"}
.bi-sign-railroad::before{content:"\f866"}
.bi-building-add::before{content:"\f867"}
.bi-building-check::before{content:"\f868"}
.bi-building-dash::before{content:"\f869"}
.bi-building-down::before{content:"\f86a"}
.bi-building-exclamation::before{content:"\f86b"}
.bi-building-fill-add::before{content:"\f86c"}
.bi-building-fill-check::before{content:"\f86d"}
.bi-building-fill-dash::before{content:"\f86e"}
.bi-building-fill-down::before{content:"\f86f"}
.bi-building-fill-exclamation::before{content:"\f870"}
.bi-building-fill-gear::before{content:"\f871"}
.bi-building-fill-lock::before{content:"\f872"}
.bi-building-fill-slash::before{content:"\f873"}
.bi-building-fill-up::before{content:"\f874"}
.bi-building-fill-x::before{content:"\f875"}
.bi-building-fill::before{content:"\f876"}
.bi-building-gear::before{content:"\f877"}
.bi-building-lock::before{content:"\f878"}
.bi-building-slash::before{content:"\f879"}
.bi-building-up::before{content:"\f87a"}
.bi-building-x::before{content:"\f87b"}
.bi-buildings-fill::before{content:"\f87c"}
.bi-buildings::before{content:"\f87d"}
.bi-bus-front-fill::before{content:"\f87e"}
.bi-bus-front::before{content:"\f87f"}
.bi-ev-front-fill::before{content:"\f880"}
.bi-ev-front::before{content:"\f881"}
.bi-globe-americas::before{content:"\f882"}
.bi-globe-asia-australia::before{content:"\f883"}
.bi-globe-central-south-asia::before{content:"\f884"}
.bi-globe-europe-africa::before{content:"\f885"}
.bi-house-add-fill::before{content:"\f886"}
.bi-house-add::before{content:"\f887"}
.bi-house-check-fill::before{content:"\f888"}
.bi-house-check::before{content:"\f889"}
.bi-house-dash-fill::before{content:"\f88a"}
.bi-house-dash::before{content:"\f88b"}
.bi-house-down-fill::before{content:"\f88c"}
.bi-house-down::before{content:"\f88d"}
.bi-house-exclamation-fill::before{content:"\f88e"}
.bi-house-exclamation::before{content:"\f88f"}
.bi-house-gear-fill::before{content:"\f890"}
.bi-house-gear::before{content:"\f891"}
.bi-house-lock-fill::before{content:"\f892"}
.bi-house-lock::before{content:"\f893"}
.bi-house-slash-fill::before{content:"\f894"}
.bi-house-slash::before{content:"\f895"}
.bi-house-up-fill::before{content:"\f896"}
.bi-house-up::before{content:"\f897"}
.bi-house-x-fill::before{content:"\f898"}
.bi-house-x::before{content:"\f899"}
.bi-person-add::before{content:"\f89a"}
.bi-person-down::before{content:"\f89b"}
.bi-person-exclamation::before{content:"\f89c"}
.bi-person-fill-add::before{content:"\f89d"}
.bi-person-fill-check::before{content:"\f89e"}
.bi-person-fill-dash::before{content:"\f89f"}
.bi-person-fill-down::before{content:"\f8a0"}
.bi-person-fill-exclamation::before{content:"\f8a1"}
.bi-person-fill-gear::before{content:"\f8a2"}
.bi-person-fill-lock::before{content:"\f8a3"}
.bi-person-fill-slash::before{content:"\f8a4"}
.bi-person-fill-up::before{content:"\f8a5"}
.bi-person-fill-x::before{content:"\f8a6"}
.bi-person-gear::before{content:"\f8a7"}
.bi-person-lock::before{content:"\f8a8"}
.bi-person-slash::before{content:"\f8a9"}
.bi-person-up::before{content:"\f8aa"}
.bi-scooter::before{content:"\f8ab"}
.bi-taxi-front-fill::before{content:"\f8ac"}
.bi-taxi-front::before{content:"\f8ad"}
.bi-amd::before{content:"\f8ae"}
.bi-database-add::before{content:"\f8af"}
.bi-database-check::before{content:"\f8b0"}
.bi-database-dash::before{content:"\f8b1"}
.bi-database-down::before{content:"\f8b2"}
.bi-database-exclamation::before{content:"\f8b3"}
.bi-database-fill-add::before{content:"\f8b4"}
.bi-database-fill-check::before{content:"\f8b5"}
.bi-database-fill-dash::before{content:"\f8b6"}
.bi-database-fill-down::before{content:"\f8b7"}
.bi-database-fill-exclamation::before{content:"\f8b8"}
.bi-database-fill-gear::before{content:"\f8b9"}
.bi-database-fill-lock::before{content:"\f8ba"}
.bi-database-fill-slash::before{content:"\f8bb"}
.bi-database-fill-up::before{content:"\f8bc"}
.bi-database-fill-x::before{content:"\f8bd"}
.bi-database-fill::before{content:"\f8be"}
.bi-database-gear::before{content:"\f8bf"}
.bi-database-lock::before{content:"\f8c0"}
.bi-database-slash::before{content:"\f8c1"}
.bi-database-up::before{content:"\f8c2"}
.bi-database-x::before{content:"\f8c3"}
.bi-database::before{content:"\f8c4"}
.bi-houses-fill::before{content:"\f8c5"}
.bi-houses::before{content:"\f8c6"}
.bi-nvidia::before{content:"\f8c7"}
.bi-person-vcard-fill::before{content:"\f8c8"}
.bi-person-vcard::before{content:"\f8c9"}
.bi-sina-weibo::before{content:"\f8ca"}
.bi-tencent-qq::before{content:"\f8cb"}
.bi-wikipedia::before{content:"\f8cc"}
.bi-alphabet-uppercase::before{content:"\f2a5"}
.bi-alphabet::before{content:"\f68a"}
.bi-amazon::before{content:"\f68d"}
.bi-arrows-collapse-vertical::before{content:"\f690"}
.bi-arrows-expand-vertical::before{content:"\f695"}
.bi-arrows-vertical::before{content:"\f698"}
.bi-arrows::before{content:"\f6a2"}
.bi-ban-fill::before{content:"\f6a3"}
.bi-ban::before{content:"\f6b6"}
.bi-bing::before{content:"\f6c2"}
.bi-cake::before{content:"\f6e0"}
.bi-cake2::before{content:"\f6ed"}
.bi-cookie::before{content:"\f6ee"}
.bi-copy::before{content:"\f759"}
.bi-crosshair::before{content:"\f769"}
.bi-crosshair2::before{content:"\f794"}
.bi-emoji-astonished-fill::before{content:"\f795"}
.bi-emoji-astonished::before{content:"\f79a"}
.bi-emoji-grimace-fill::before{content:"\f79b"}
.bi-emoji-grimace::before{content:"\f7a0"}
.bi-emoji-grin-fill::before{content:"\f7a1"}
.bi-emoji-grin::before{content:"\f7a6"}
.bi-emoji-surprise-fill::before{content:"\f7a7"}
.bi-emoji-surprise::before{content:"\f7ac"}
.bi-emoji-tear-fill::before{content:"\f7ad"}
.bi-emoji-tear::before{content:"\f7b2"}
.bi-envelope-arrow-down-fill::before{content:"\f7b3"}
.bi-envelope-arrow-down::before{content:"\f7b8"}
.bi-envelope-arrow-up-fill::before{content:"\f7b9"}
.bi-envelope-arrow-up::before{content:"\f7be"}
.bi-feather::before{content:"\f7bf"}
.bi-feather2::before{content:"\f7c4"}
.bi-floppy-fill::before{content:"\f7c5"}
.bi-floppy::before{content:"\f7d8"}
.bi-floppy2-fill::before{content:"\f7d9"}
.bi-floppy2::before{content:"\f7e4"}
.bi-gitlab::before{content:"\f7e5"}
.bi-highlighter::before{content:"\f7f8"}
.bi-marker-tip::before{content:"\f802"}
.bi-nvme-fill::before{content:"\f803"}
.bi-nvme::before{content:"\f80c"}
.bi-opencollective::before{content:"\f80d"}
.bi-pci-card-network::before{content:"\f8cd"}
.bi-pci-card-sound::before{content:"\f8ce"}
.bi-radar::before{content:"\f8cf"}
.bi-send-arrow-down-fill::before{content:"\f8d0"}
.bi-send-arrow-down::before{content:"\f8d1"}
.bi-send-arrow-up-fill::before{content:"\f8d2"}
.bi-send-arrow-up::before{content:"\f8d3"}
.bi-sim-slash-fill::before{content:"\f8d4"}
.bi-sim-slash::before{content:"\f8d5"}
.bi-sourceforge::before{content:"\f8d6"}
.bi-substack::before{content:"\f8d7"}
.bi-threads-fill::before{content:"\f8d8"}
.bi-threads::before{content:"\f8d9"}
.bi-transparency::before{content:"\f8da"}
.bi-twitter-x::before{content:"\f8db"}
.bi-type-h4::before{content:"\f8dc"}
.bi-type-h5::before{content:"\f8dd"}
.bi-type-h6::before{content:"\f8de"}
.bi-backpack-fill::before{content:"\f8df"}
.bi-backpack::before{content:"\f8e0"}
.bi-backpack2-fill::before{content:"\f8e1"}
.bi-backpack2::before{content:"\f8e2"}
.bi-backpack3-fill::before{content:"\f8e3"}
.bi-backpack3::before{content:"\f8e4"}
.bi-backpack4-fill::before{content:"\f8e5"}
.bi-backpack4::before{content:"\f8e6"}
.bi-brilliance::before{content:"\f8e7"}
.bi-cake-fill::before{content:"\f8e8"}
.bi-cake2-fill::before{content:"\f8e9"}
.bi-duffle-fill::before{content:"\f8ea"}
.bi-duffle::before{content:"\f8eb"}
.bi-exposure::before{content:"\f8ec"}
.bi-gender-neuter::before{content:"\f8ed"}
.bi-highlights::before{content:"\f8ee"}
.bi-luggage-fill::before{content:"\f8ef"}
.bi-luggage::before{content:"\f8f0"}
.bi-mailbox-flag::before{content:"\f8f1"}
.bi-mailbox2-flag::before{content:"\f8f2"}
.bi-noise-reduction::before{content:"\f8f3"}
.bi-passport-fill::before{content:"\f8f4"}
.bi-passport::before{content:"\f8f5"}
.bi-person-arms-up::before{content:"\f8f6"}
.bi-person-raised-hand::before{content:"\f8f7"}
.bi-person-standing-dress::before{content:"\f8f8"}
.bi-person-standing::before{content:"\f8f9"}
.bi-person-walking::before{content:"\f8fa"}
.bi-person-wheelchair::before{content:"\f8fb"}
.bi-shadows::before{content:"\f8fc"}
.bi-suitcase-fill::before{content:"\f8fd"}
.bi-suitcase-lg-fill::before{content:"\f8fe"}
.bi-suitcase-lg::before{content:"\f8ff"}
.bi-suitcase::before{content:"\f900"}
.bi-suitcase2-fill::before{content:"\f901"}
.bi-suitcase2::before{content:"\f902"}
.bi-vignette::before{content:"\f903"}
.bi-bluesky::before{content:"\f7f9"}
.bi-tux::before{content:"\f904"}
.bi-beaker-fill::before{content:"\f905"}
.bi-beaker::before{content:"\f906"}
.bi-flask-fill::before{content:"\f907"}
.bi-flask-florence-fill::before{content:"\f908"}
.bi-flask-florence::before{content:"\f909"}
.bi-flask::before{content:"\f90a"}
.bi-leaf-fill::before{content:"\f90b"}
.bi-leaf::before{content:"\f90c"}
.bi-measuring-cup-fill::before{content:"\f90d"}
.bi-measuring-cup::before{content:"\f90e"}
.bi-unlock2-fill::before{content:"\f90f"}
.bi-unlock2::before{content:"\f910"}
.bi-battery-low::before{content:"\f911"}
.bi-anthropic::before{content:"\f912"}
.bi-apple-music::before{content:"\f913"}
.bi-claude::before{content:"\f914"}
.bi-openai::before{content:"\f915"}
.bi-perplexity::before{content:"\f916"}
.bi-css::before{content:"\f917"}
.bi-javascript::before{content:"\f918"}
.bi-typescript::before{content:"\f919"}
.bi-fork-knife::before{content:"\f91a"}
.bi-globe-americas-fill::before{content:"\f91b"}
.bi-globe-asia-australia-fill::before{content:"\f91c"}
.bi-globe-central-south-asia-fill::before{content:"\f91d"}
.bi-globe-europe-africa-fill::before{content:"\f91e"}
/* Generated custom icon CSS (ci-cu-<name> classes) */
/* AUTO-GENERATED FILE.
 * Generated by scripts/generate-custom-icons-css.js
 * Do not edit directly – edit SVGs in public/custom-icons instead.
 */
@font-face {
  font-family: 'custom-icons';
  src: url('/Technische-Medien/Assets/fonts/custom-icons-woff2.woff2') format('woff2'),
       url('/Technische-Medien/Assets/fonts/custom-icons-woff.woff') format('woff');
  font-display: block;
}
/* Base styles for custom icon classes (Bootstrap-like) */
.bi-custom-icon,
[class^="ci-cu-"],
[class*=" ci-cu-"] {
  display: inline-block;
  /* Default size: 16px (can be overridden with font-size) */
  font-size: 16px;
  width: 1em;
  height: 1em;
}
/* Base styles for ::before pseudo-elements (where the icon glyph is rendered) */
.bi-custom-icon::before,
[class^="ci-cu-"]::before,
[class*=" ci-cu-"]::before {
  display: inline-block;
  font-family: 'custom-icons' !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: inherit;
  width: 100%;
  height: 100%;
}
/* arbeitshilfen.svg */
.ci-cu-arbeitshilfen::before {
  font-family: 'custom-icons' !important;
  content: "\ea01";
}
/* arrow.svg */
.ci-cu-arrow::before {
  font-family: 'custom-icons' !important;
  content: "\ea02";
}
/* bibliothek.svg */
.ci-cu-bibliothek::before {
  font-family: 'custom-icons' !important;
  content: "\ea03";
}
/* button-arrow.svg */
.ci-cu-button-arrow::before {
  font-family: 'custom-icons' !important;
  content: "\ea04";
}
/* button-arrow-small.svg */
.ci-cu-button-arrow-small::before {
  font-family: 'custom-icons' !important;
  content: "\ea05";
}
/* close.svg */
.ci-cu-close::before {
  font-family: 'custom-icons' !important;
  content: "\ea06";
}
/* download.svg */
.ci-cu-download::before {
  font-family: 'custom-icons' !important;
  content: "\ea07";
}
/* entwicklung.svg */
.ci-cu-entwicklung::before {
  font-family: 'custom-icons' !important;
  content: "\ea08";
}
/* fachanfragen.svg */
.ci-cu-fachanfragen::before {
  font-family: 'custom-icons' !important;
  content: "\ea09";
}
/* facharbeit.svg */
.ci-cu-facharbeit::before {
  font-family: 'custom-icons' !important;
  content: "\ea0a";
}
/* geo.svg */
.ci-cu-geo::before {
  font-family: 'custom-icons' !important;
  content: "\ea0b";
}
/* globe.svg */
.ci-cu-globe::before {
  font-family: 'custom-icons' !important;
  content: "\ea0c";
}
/* hybrid.svg */
.ci-cu-hybrid::before {
  font-family: 'custom-icons' !important;
  content: "\ea0d";
}
/* idw-life.svg */
.ci-cu-idw-life::before {
  font-family: 'custom-icons' !important;
  content: "\ea0e";
}
/* interessenvertretung.svg */
.ci-cu-interessenvertretung::before {
  font-family: 'custom-icons' !important;
  content: "\ea0f";
}
/* probeabo.svg */
.ci-cu-probeabo::before {
  font-family: 'custom-icons' !important;
  content: "\ea10";
}
/* qualitaetsmanagement.svg */
.ci-cu-qualitaetsmanagement::before {
  font-family: 'custom-icons' !important;
  content: "\ea11";
}
/* voucher.svg */
.ci-cu-voucher::before {
  font-family: 'custom-icons' !important;
  content: "\ea12";
}
/* Token system */
:root {
  /* new accessibility colors */
  --accessibility-color-crimson: #e4003a;
  --accessibility-color-crimson-dark: #a30029;
  --accessibility-color-blue-violet: #5d51cd;
  --accessibility-color-blue-violet-dark: #4537be;


  /* ========================================
     LAYOUT & POSITIONING
     ======================================== */
  /* Z-index */
  --bi-z-index-header: 100;
  --bi-z-index-tab-item: 96;
  --bi-z-index-decorative-line-circle: 95;
  --bi-z-index-decorative-line: 94;
  --bi-z-index-cookie-consent: 110;
  --bi-z-index-dialog: 200;
  --bi-z-index-mobile-menu: 90;
  --bi-z-index-newsletter: 80;
  --bi-z-index-scroll-spy: 50;
  /* Theme Module z-index for internal layering */
  --bi-z-index-theme-module-watermark: 0;
  --bi-z-index-theme-module-inactive: 1;
  --bi-z-index-theme-module-active: 2;
  /* Stage z-index for content layering above image */
  --bi-z-index-stage-content: 1;
  /* Container Max Width */
  --bi-max-width-desktop: 1120px;
  --bi-max-width-desktop-l: 1120px;
  --bi-max-width-desktop-xl: 1120px;
  /* Content Max Width – list and content blocks inside a section */
  --bi-max-width-list-content: 752px;

  /* ========================================
     VISUAL STYLING
     ======================================== */
  /* Transitions */
  --transition-base: all 0.2s ease;

  /* ========================================
     TYPOGRAPHY SYSTEM
     ======================================== */
  /* *** FONT FAMILY *** */
  --bi-font-family-primary: 'Source Sans Pro', sans-serif;
  --bi-font-family-headline: 'Poppins', sans-serif;
  /* *** FONT SIZES *** */
  --bi-font-size-xs: 12px;
  --bi-font-size-sm: 16px;
  --bi-font-size-md: 18px;
  --bi-font-size-lg: 20px;
  --bi-font-size-xl: 22px;
  --bi-font-size-xxl-mobile: 24px;
  --bi-font-size-xxl: 40px;
  /* *** FONT WEIGHTS *** */
  --bi-font-weight-thin: 300;
  --bi-font-weight-regular: 400;
  --bi-font-weight-medium: 500;
  --bi-font-weight-semibold: 600;
  --bi-font-weight-bold: 700;
  /* *** LINE HEIGHTS *** */
  --bi-line-height-mini: 100%;
  --bi-line-height-tight-small: 110%;
  --bi-line-height-tight: 120%;
  --bi-line-height-normal: 130%;
  --bi-line-height-loose: 140%;
  --bi-line-height-relaxed: 160%;
  --bi-line-height-extra-compact: 70%;
  /* LETTER SPACING */
  --bi-letter-spacing-normal: 0;
  --bi-letter-spacing-relaxed: 0.032em; /* 3% of font size */
  --bi-letter-spacing-medium: 0.05em; /* 5% of font size */
  /* *** SEMANTIC TYPOGRAPHY TOKENS *** */
  /* Headlines */
  --bi-font-headline-s: var(--bi-font-size-sm); /* 16px */
  --bi-font-headline-m: var(--bi-font-size-md); /* 18px */
  --bi-font-headline-l: var(--bi-font-size-lg); /* 20px */
  --bi-font-headline-xl: var(--bi-font-size-xl); /* 24px */
  --bi-font-headline-xxl: var(--bi-font-size-xxl); /* 40px */
  /* Copy (Body Text) */
  --bi-font-copy-s: var(--bi-font-size-sm); /* 16px */
  --bi-font-copy-m: var(--bi-font-size-md); /* 18px */
  --bi-font-copy-l: var(--bi-font-size-lg); /* 20px */
  --bi-font-copy-xl: var(--bi-font-size-xl); /* 22px */
  --bi-font-copy-xxl: var(--bi-font-size-xxl-mobile); /* 24px */
  /* Labels */
  --bi-font-label-s: var(--bi-font-size-sm); /* 16px */
  --bi-font-label-m: var(--bi-font-size-md); /* 18px */
  /* Button */
  --bi-font-button: var(--bi-font-size-md); /* 18px */
  /* Chip */
  --bi-font-chip: var(--bi-font-size-xs); /* 12px */

  /* ========================================
     SPACING SYSTEM
     ======================================== */
  /* *** PRIMITIVE GRID SYSTEM *** */
  --bi-size-000: 0px;
  --bi-size-005: 1px;
  --bi-size-010: 1.5px;
  --bi-size-025: 2px;
  --bi-size-050: 4px;
  --bi-size-100: 8px;
  --bi-size-150: 12px;
  --bi-size-200: 16px;
  --bi-size-300: 24px;
  --bi-size-400: 32px;
  --bi-size-500: 40px;
  --bi-size-600: 48px;
  --bi-size-700: 56px;
  --bi-size-800: 64px;
  --bi-size-900: 72px;
  --bi-size-1000: 80px;
  --bi-size-1500: 120px;
  --bi-size-1800: 150px;
  --bi-size-2000: 240px;
  /* *** SEMANTIC SPACING TOKENS *** */
  /* Padding */
  --bi-padding-mini: var(--bi-size-050);
  --bi-padding-xxsmall: var(--bi-size-100);
  --bi-padding-xsmall: var(--bi-size-150);
  --bi-padding-small: var(--bi-size-200);
  --bi-padding-medium: var(--bi-size-300);
  --bi-padding-large: var(--bi-size-500);
  /* Container */
  --bi-container-padding-xsmall: var(--bi-size-200);
  --bi-container-padding-small: var(--bi-size-300);
  --bi-container-padding-medium: var(--bi-size-500);
  --bi-container-padding-large: var(--bi-size-1000);
  --bi-container-padding-xlarge: var(--bi-size-1500);
  /* Global */
  --bi-sides-default: var(--bi-size-300);
  --bi-topbottom-default: var(--bi-size-500);
  --bi-sides-fixed: var(--bi-size-1800);
  /* Gap */
  --bi-gap-small: var(--bi-size-050);
  --bi-gap-medium: var(--bi-size-100);
  --bi-gap-large: var(--bi-size-200);
  --bi-gap-xlarge: var(--bi-size-300);
  --bi-gap-xxlarge: var(--bi-size-500);
  --bi-gap-xxxlarge: var(--bi-size-800);

  /* ========================================
     BORDER & SHAPE SYSTEM
     ======================================== */
  /* Radius */
  --bi-radius-none: 0px;
  --bi-radius-small: var(--bi-size-050);
  --bi-radius-medium: var(--bi-size-150);
  --bi-radius-big: var(--bi-size-200);
  --bi-radius-full: 999px;
  /* Strokes */
  --bi-stroke-thin: var(--bi-size-025);
  --bi-stroke-thick: var(--bi-size-050);
  /* Border */
  --bi-border-width-thin: var(--bi-size-005);
  --bi-border-width: var(--bi-size-025);

  /* ========================================
     ELEVATION SYSTEM
     ======================================== */
  /* Shadow Tokens */
  --bi-elevation-small: 0 4px 12px 0 rgba(0, 0, 0, 0.12);
  --bi-elevation-big: 2px 7px 24px 0 rgba(0, 0, 0, 0.11);
  --bi-box-shadow-focus:
    0 0 0 2px var(--bi-color-focus-inner), 0 0 0 6px var(--bi-color-focus-inner);

  /* ========================================
     COLOR SYSTEM
   ======================================== */

  /* *** PRIMITIVE COLORS *** */
  /* Brand Colors - Primary */
  --bi-color-brand-primary-500: #eb5c60;
  --bi-color-brand-primary-600: #e4003a;
  --bi-color-brand-primary-750: #a90033;

  /* Brand Colors - Secondary */
  --bi-color-brand-secondary-650: #254b5f;
  --bi-color-brand-secondary-700: #4f41c8;
  --bi-color-brand-secondary-900: #302683;
  --bi-color-brand-secondary-1000: #181452;

  /* Brand Colors - Tertiary */
  --bi-color-brand-tertiary-200: #d3d0f1;
  --bi-color-brand-tertiary-500: #9890df;
  --bi-color-brand-tertiary-600: #e4003a;

  /* Topic Colors */
  --bi-color-topic-audit: #c7d1ec;
  --bi-color-topic-accounting: #f4d1d6;
  --bi-color-topic-sustainability: #c1dfc4;
  --bi-color-topic-quality-management: #ebe1bf;
  --bi-color-topic-tax: #fdd5a5;
  --bi-color-topic-digitalization: #d8e8c5;
  --bi-color-topic-advisory: #d6ebe7;
  --bi-color-topic-legal: #dec6c4;
  --bi-color-topic-industries: #d1d9d0;
  --bi-color-topic-cross-functional: #0f4a62;
  --bi-color-topic-special: #72c7f6;

  /* Functional Colors */
  --bi-color-functional-message: #17bef3;
  --bi-color-functional-message-light: #d1f4ff;
  --bi-color-functional-success: #088737;
  --bi-color-functional-success-light: #d1ffe3;
  --bi-color-functional-warning: #f3c317;
  --bi-color-functional-warning-light: #fff7de;
  --bi-color-functional-error: #e13b3c;
  --bi-color-functional-error-light: #ffeaea;

  /* Base Colors - Greys */
  --bi-color-base-grey-050: #f2f2f3;
  --bi-color-base-grey-075: #efeced;
  --bi-color-base-grey-100: #eae9eb;
  --bi-color-base-grey-200: #dfd8da;
  --bi-color-base-grey-400: #b8b4bb;
  --bi-color-base-grey-550: #8f8994;
  /* WCAG AA 4.5:1 on white AND grey-100; previous #6b6b6b was 4.4:1 on grey */
  --bi-color-base-grey-600: #666666;

  /* Base Colors */
  --bi-color-base-white: #ffffff;
  --bi-color-base-white-soft: #faf9f9;
  --bi-color-base-black: #000000;

  /* *** SEMANTIC COLOR TOKENS *** */
  /* Brand Colors */
  --bi-color-brand-primary: var(--bi-color-brand-primary-600);
  --bi-color-brand-primary-hover: var(--bi-color-brand-primary-500);
  --bi-color-brand-primary-active: var(--bi-color-brand-primary-750);

  --bi-color-brand-secondary: var(--bi-color-brand-secondary-900);
  --bi-color-brand-secondary-hover: var(--bi-color-brand-secondary-700);
  --bi-color-brand-secondary-active: var(--bi-color-brand-secondary-1000);

  --bi-color-brand-tertiary: var(--bi-color-brand-tertiary-200);
  --bi-color-brand-tertiary-hover: var(--bi-color-brand-tertiary-500);
  --bi-color-brand-tertiary-active: var(--bi-color-brand-tertiary-600);

  /* Button Colors */
  --bi-color-button-primary: var(--bi-color-brand-primary-600);
  /* --bi-color-button-primary-hover: var(--bi-color-brand-primary-500); */
  --bi-color-button-primary-hover: var(--accessibility-color-crimson-dark);
  /* --bi-color-button-primary-active: var(--bi-color-brand-primary-750); */
  --bi-color-button-primary-active: var(--accessibility-color-crimson-dark);
  --bi-color-button-primary-text: var(--bi-color-base-white);

  --bi-color-button-secondary: var(--bi-color-brand-secondary-900);
  --bi-color-button-secondary-hover: var(--bi-color-brand-secondary-700);
  --bi-color-button-secondary-active: var(--bi-color-brand-secondary-1000);

  --bi-color-button-tertiary: var(--bi-color-brand-tertiary-200);
  --bi-color-button-tertiary-hover: var(--bi-color-brand-tertiary-500);
  --bi-color-button-tertiary-active: var(--bi-color-brand-tertiary-600);

  /* Link Colors */
  --bi-color-link-primary: var(--bi-color-brand-primary-600);
  --bi-color-link-primary-hover: var(--bi-color-brand-primary-500);
  --bi-color-link-primary-active: var(--bi-color-brand-primary-750);
  --bi-color-link-primary-visited: var(--bi-color-brand-primary-600);
  --bi-color-button-link-secondary: var(--bi-color-brand-secondary-900);
  --bi-color-button-link-secondary-hover: var(--bi-color-brand-secondary-700);
  --bi-color-button-link-secondary-active: var(--bi-color-brand-secondary-1000);
  --bi-color-button-link-secondary-visited: var(
    --bi-color-brand-secondary-1000
  );

  /* Text Colors */
  --bi-color-text-secondary: var(--bi-color-brand-secondary-900);
  --bi-color-text-white: var(--bi-color-base-white);
  --bi-color-text-black: var(--bi-color-base-black);
  --bi-color-text-grey: var(--bi-color-base-grey-050);

  /* Icon Colors */
  --bi-color-icon-primary: var(--bi-color-brand-primary-600);
  --bi-color-icon-grey-light: var(--bi-color-base-grey-200);

  /* Container Colors */
  --bi-color-container-secondary: var(--bi-color-brand-secondary-900);
  --bi-color-container-white: var(--bi-color-base-white);
  --bi-color-container-white-soft: var(--bi-color-base-white-soft);
  --bi-color-container-message: var(--bi-color-functional-message-light);
  --bi-color-container-success: var(--bi-color-functional-success-light);
  --bi-color-container-warning: var(--bi-color-functional-warning-light);
  --bi-color-container-error: var(--bi-color-functional-error-light);
  --bi-color-container-grey: var(--bi-color-base-grey-100);
  --bi-color-container-mid-grey: var(--bi-color-base-grey-075);

  /* Surface Colors – contrast backgrounds for nested components */
  --bi-color-surface: var(--bi-color-container-white);
  --bi-color-surface-input: var(--bi-color-container-grey);

  /* Label Colors  */
  --bi-color-label-primary: var(--bi-color-brand-primary-600);
  --bi-color-label-primary-hover: var(--bi-color-brand-primary-500);
  --bi-color-label-primary-active: var(--bi-color-brand-primary-750);

  /* Border Colors */
  --bi-color-border-secondary: var(--bi-color-brand-secondary-900);

  /* Grey Colors */
  --bi-color-brand-grey: var(--bi-color-base-grey-050);
  --bi-color-brand-grey-light: var(--bi-color-base-grey-100);
  --bi-color-brand-grey-hover: var(--bi-color-base-grey-400);
  --bi-color-brand-grey-active: var(--bi-color-base-grey-550);
  --bi-color-brand-grey-mid: var(--bi-color-base-grey-600);

  /* Focus Colors */
  --bi-color-focus: #2c41ff;
  --bi-color-focus-inner: #ffffff;
}
/**
 * Color Tokens - Primitive & Semantic Colors for Brand, Base, Topic, Functional 
 * Ordered to match variables.css (NEW section)
 */
/* Brand Colors - Primary */
.bi-brand-primary-500 {
  color: var(--bi-color-brand-primary-500);
}
.bi-brand-primary-600 {
  color: var(--bi-color-brand-primary-600);
}
.bi-brand-primary-750 {
  color: var(--bi-color-brand-primary-750);
}
/* Brand Colors - Secondary */
.bi-brand-secondary-700 {
  color: var(--bi-color-brand-secondary-700);
}
.bi-brand-secondary-900 {
  color: var(--bi-color-brand-secondary-900);
}
.bi-brand-secondary-1000 {
  color: var(--bi-color-brand-secondary-1000);
}
/* Brand Colors - Tertiary */
.bi-brand-tertiary-200 {
  color: var(--bi-color-brand-tertiary-200);
}
.bi-brand-tertiary-500 {
  color: var(--bi-color-brand-tertiary-500);
}
.bi-brand-tertiary-600 {
  color: var(--bi-color-brand-tertiary-600);
}
/* Topic Colors */
.bi-topic-audit {
  color: var(--bi-color-topic-audit);
}
.bi-topic-accounting {
  color: var(--bi-color-topic-accounting);
}
.bi-topic-sustainability {
  color: var(--bi-color-topic-sustainability);
}
.bi-topic-quality-management {
  color: var(--bi-color-topic-quality-management);
}
.bi-topic-tax {
  color: var(--bi-color-topic-tax);
}
.bi-topic-digitalization {
  color: var(--bi-color-topic-digitalization);
}
.bi-topic-advisory {
  color: var(--bi-color-topic-advisory);
}
.bi-topic-legal {
  color: var(--bi-color-topic-legal);
}
.bi-topic-industries {
  color: var(--bi-color-topic-industries);
}
.bi-topic-cross-functional {
  color: var(--bi-color-topic-cross-functional);
}
.bi-topic-special {
  color: var(--bi-color-topic-special);
}
/* Functional Colors */
.bi-functional-message {
  color: var(--bi-color-functional-message);
}
.bi-functional-message-light {
  color: var(--bi-color-functional-message-light);
}
.bi-functional-success {
  color: var(--bi-color-functional-success);
}
.bi-functional-success-light {
  color: var(--bi-color-functional-success-light);
}
.bi-functional-warning {
  color: var(--bi-color-functional-warning);
}
.bi-functional-warning-light {
  color: var(--bi-color-functional-warning-light);
}
.bi-functional-error {
  color: var(--bi-color-functional-error);
}
.bi-functional-error-light {
  color: var(--bi-color-functional-error-light);
}
/* Base Colors - Greys */
.bi-base-grey-050 {
  color: var(--bi-color-base-grey-050);
}
.bi-base-grey-100 {
  color: var(--bi-color-base-grey-100);
}
.bi-base-grey-400 {
  color: var(--bi-color-base-grey-400);
}
.bi-base-grey-550 {
  color: var(--bi-color-base-grey-550);
}
/* Base Colors */
.bi-base-white {
  color: var(--bi-color-base-white);
}
.bi-base-black {
  color: var(--bi-color-base-black);
}
/* Button Colors */
.bi-button-primary {
  background-color: var(--bi-color-button-primary);
}
.bi-button-primary-hover {
  background-color: var(--bi-color-button-primary-hover);
}
.bi-button-primary-active {
  background-color: var(--bi-color-button-primary-active);
}
.bi-button-primary-text {
  color: var(--bi-color-button-primary-text);
}
.bi-button-secondary {
  background-color: var(--bi-color-button-secondary);
}
.bi-button-secondary-hover {
  background-color: var(--bi-color-button-secondary-hover);
}
.bi-button-secondary-active {
  background-color: var(--bi-color-button-secondary-active);
}
.bi-button-tertiary {
  background-color: var(--bi-color-button-tertiary);
}
.bi-button-tertiary-hover {
  background-color: var(--bi-color-button-tertiary-hover);
}
.bi-button-tertiary-active {
  background-color: var(--bi-color-button-tertiary-active);
}
/* Link Colors */
.bi-button-link-secondary {
  color: var(--bi-color-button-link-secondary);
}
.bi-button-link-secondary-hover {
  color: var(--bi-color-button-link-secondary-hover);
}
.bi-button-link-secondary-active {
  color: var(--bi-color-button-link-secondary-active);
}
.bi-button-link-secondary-visited {
  color: var(--bi-color-button-link-secondary-visited);
}
/* *** SEMANTIC COLORS *** */
/* Text Colors */
.bi-text-secondary {
  color: var(--bi-color-text-secondary);
}
.bi-text-white {
  color: var(--bi-color-text-white);
}
.bi-text-black {
  color: var(--bi-color-text-black);
}
/* Icon Colors */
.bi-icon-primary {
  color: var(--bi-color-icon-primary);
}
/* Container Colors */
.bi-container-secondary {
  background-color: var(--bi-color-container-secondary);
  color: var(--bi-color-text-white);
  /* Flip the "secondary text" token so components that paint accent text
     with var(--bi-color-text-secondary) (e.g. h1/h2 in typography.css)
     remain legible on the dark secondary background. Mirrors the pattern
     used by .bi-container-white/grey for --bi-color-surface. */
  --bi-color-text-secondary: var(--bi-color-text-white);
}
.bi-container-white {
  background-color: var(--bi-color-container-white);
  color: var(--bi-color-text-black);
  /* Reset the token in case a parent .bi-container-secondary flipped it to
     white — otherwise headings (which read this token) stay white on a
     light nested background. */
  --bi-color-text-secondary: var(--bi-color-brand-secondary-900);
  --bi-color-surface: var(--bi-color-container-grey);
  --bi-color-surface-input: var(--bi-color-container-white);
}
.bi-container-grey {
  background-color: var(--bi-color-container-grey);
  color: var(--bi-color-text-black);
  --bi-color-text-secondary: var(--bi-color-brand-secondary-900);
  --bi-color-surface: var(--bi-color-container-white);
  --bi-color-surface-input: var(--bi-color-container-grey);
}
.bi-container-message {
  background-color: var(--bi-color-container-message);
  color: var(--bi-color-text-black);
}
.bi-container-success {
  background-color: var(--bi-color-container-success);
  color: var(--bi-color-text-black);
}
.bi-container-warning {
  background-color: var(--bi-color-container-warning);
  color: var(--bi-color-text-black);
}
.bi-container-error {
  background-color: var(--bi-color-container-error);
  color: var(--bi-color-text-black);
}
/* Label Colors */
.bi-label-primary {
  color: var(--bi-color-label-primary);
}
.bi-label-primary-hover {
  color: var(--bi-color-label-primary-hover);
}
.bi-label-primary-active {
  color: var(--bi-color-label-primary-active);
}
/* Border Colors */
.bi-border-secondary {
  border-color: var(--bi-color-border-secondary);
}
/* Grey Colors */
.bi-brand-grey {
  color: var(--bi-color-brand-grey);
}
.bi-brand-grey-light {
  color: var(--bi-color-brand-grey-light);
}
.bi-brand-grey-hover {
  color: var(--bi-color-brand-grey-hover);
}
.bi-brand-grey-active {
  color: var(--bi-color-brand-grey-active);
}
/**
 * Deprecated / legacy CSS - kept for backward compatibility.
 * Imported in main.css after variables.css and colors.css.
 */
:root {
  --bi-color-container-secondary-light: var(--bi-color-base-grey-100);
  --bi-color-text-secondary-final: var(--bi-color-base-grey-900);

  --bi-color-brand-primary-700: #cc0025;
  --bi-color-brand-secondary-600: #00374c;

  /* Base Colors - Greys */
  --bi-color-base-grey-400: #b8b4bb;
  --bi-color-base-grey-900: #2c2c2c;

  --bi-color-button-tertiary-text: var(--bi-color-base-white);

  --bi-color-text-light-grey: var(--bi-color-base-grey-300);
  --bi-color-text-dark-grey: var(--bi-color-base-grey-900);

  --bi-color-icon-grey: var(--bi-color-base-grey-550);
  --bi-color-icon-white: var(--bi-color-base-white);

  /* Container Colors */
  --bi-color-container-light-grey: var(--bi-color-base-grey-100);
  --bi-color-container-page: var(--bi-color-base-grey-050);

  /* Form Colors */
  --bi-color-checkbox-background: var(--bi-color-base-grey-050);

  /* Focus Ring Colors */
  --bi-color-focus-primary: var(--bi-color-brand-primary-600);
  --bi-color-focus-secondary: var(--bi-color-brand-secondary-600);
  --bi-color-focus-inner: var(--bi-color-base-white);

  --bi-color-brand-tertiary-150: #d0e9fb;
  --bi-color-base-grey-150: #e1e1e1;
  --bi-color-base-grey-300: #c1c1c7;
  --bi-color-icon-secondary: var(--bi-color-brand-secondary-650);
  --bi-color-container-blue: var(--bi-color-brand-tertiary-150);
  --bi-color-border-medium-grey: var(--bi-color-base-grey-300);
  /* Background Colors */
  --bi-color-background-very-light-grey: var(--bi-color-base-grey-050);
  --bi-color-background-light-grey: var(--bi-color-base-grey-100);
  --bi-color-background-medium-grey: var(--bi-color-base-grey-150);
  --bi-color-background-grey: var(--bi-color-base-grey-300);
  --bi-color-background-dark-grey: var(--bi-color-base-grey-550);
}
.bi-container-very-light-grey {
  background-color: var(--bi-color-background-very-light-grey);
}
.bi-container-secondary-light {
  background-color: var(--bi-color-container-secondary-light);
}
.bi-text-secondary-final {
  color: var(--bi-color-text-secondary-final);
}
/**
 * Typography System - Font sizes and basic typography tokens
 */
/* Heading xxl */
h1,
.bi-headline-xxl {
  font-family: var(--bi-font-family-headline);
  font-style: normal;
  font-weight: var(--bi-font-weight-semibold);
  font-size: var(--bi-font-size-xxl-mobile);
  line-height: var(--bi-line-height-tight);
  letter-spacing: var(--bi-letter-spacing-normal);
  color: var(--bi-color-text-secondary);
  margin-top: 0;
  margin-bottom: var(--bi-gap-large);
}
/* Heading xl */
h2,
.bi-headline-xl {
  font-family: var(--bi-font-family-primary);
  font-style: normal;
  font-weight: var(--bi-font-weight-semibold);
  font-size: var(--bi-font-size-xl);
  line-height: var(--bi-line-height-tight);
  letter-spacing: var(--bi-letter-spacing-medium);
  color: var(--bi-color-text-secondary);
  margin-top: 0;
  margin-bottom: var(--bi-gap-large);
}
/* Heading l */
h3,
.bi-headline-l {
  font-family: var(--bi-font-family-primary);
  font-style: normal;
  font-weight: var(--bi-font-weight-semibold);
  font-size: var(--bi-font-size-md);
  line-height: var(--bi-line-height-tight);
  letter-spacing: var(--bi-letter-spacing-normal);
  margin-top: 0;
  margin-bottom: var(--bi-gap-medium);
}
/* Heading m */
h4,
.bi-headline-m {
  font-family: var(--bi-font-family-primary);
  font-style: normal;
  font-weight: var(--bi-font-weight-semibold);
  font-size: var(--bi-font-size-md);
  line-height: var(--bi-line-height-tight);
  letter-spacing: var(--bi-letter-spacing-normal);
  margin-top: 0;
  margin-bottom: var(--bi-gap-medium);
}
/* Heading s */
h5,
.bi-headline-s {
  font-family: var(--bi-font-family-primary);
  font-style: normal;
  font-weight: var(--bi-font-weight-semibold);
  font-size: var(--bi-font-size-sm);
  line-height: var(--bi-line-height-tight);
  letter-spacing: var(--bi-letter-spacing-normal);
  margin-top: 0;
  margin-bottom: var(--bi-gap-small);
}
/* Copy l */
.bi-copy-l {
  font-family: var(--bi-font-family-primary);
  font-style: normal;
  font-weight: var(--bi-font-weight-regular);
  font-size: var(--bi-font-copy-l);
  line-height: var(--bi-line-height-normal);
  letter-spacing: var(--bi-letter-spacing-normal);
}
/* Copy m */
.bi-copy-m {
  font-family: var(--bi-font-family-primary);
  font-style: normal;
  font-weight: var(--bi-font-weight-regular);
  font-size: var(--bi-font-copy-m);
  line-height: var(--bi-line-height-tight);
  letter-spacing: var(--bi-letter-spacing-normal);
}
/* Copy s */
.bi-copy-s {
  font-family: var(--bi-font-family-primary);
  font-style: normal;
  font-weight: var(--bi-font-weight-regular);
  font-size: var(--bi-font-copy-s);
  line-height: var(--bi-line-height-tight);
  letter-spacing: var(--bi-letter-spacing-normal);
}
/* Quote */
.bi-quote {
  font-family: var(--bi-font-family-primary);
  font-style: italic;
  font-weight: var(--bi-font-weight-regular);
  font-size: var(--bi-font-copy-l);
  line-height: var(--bi-line-height-loose);
  letter-spacing: var(--bi-letter-spacing-normal);
  color: var(--bi-color-text-secondary);

  /* Override Bootstrap Icons' `.bi-quote::before` glyph (class-name collision)
     so both opening and closing quotes are matching inline text characters. */
  &::before {
    content: '\201C';
    font-family: inherit;
    font-weight: inherit;
    vertical-align: unset;
  }

  &::after {
    font-family: inherit;
    font-weight: inherit;
    content: '\201D';
  }
}
/* date */
.bi-date {
  font-family: var(--bi-font-family-primary);
  font-style: normal;
  font-weight: var(--bi-font-weight-regular);
  font-size: var(--bi-font-copy-s);
  line-height: var(--bi-line-height-tight);
  letter-spacing: var(--bi-letter-spacing-normal);
}
/* Link */
.bi-link {
  font-family: var(--bi-font-family-primary);
  font-style: normal;
  font-weight: var(--bi-font-weight-regular);
  font-size: var(--bi-font-copy-m);
  line-height: var(--bi-line-height-mini);
  letter-spacing: var(--bi-letter-spacing-normal);
  text-decoration: underline;
  color: var(--bi-color-button-link-secondary);
}
.bi-link.bi-link::before {
  content: none;
}
/* Button */
.bi-font-button {
  font-family: var(--bi-font-family-primary);
  font-style: normal;
  font-weight: var(--bi-font-weight-semibold);
  font-size: var(--bi-font-button);
  line-height: var(--bi-line-height-mini);
  letter-spacing: var(--bi-letter-spacing-normal);
}
/* Chip */
.bi-font-chip {
  font-family: var(--bi-font-family-primary);
  font-style: normal;
  font-weight: var(--bi-font-weight-semibold);
  font-size: var(--bi-font-chip);
  line-height: var(--bi-line-height-mini);
  letter-spacing: var(--bi-letter-spacing-normal);
}
/* Label */
.bi-label {
  font-family: var(--bi-font-family-primary);
  font-style: normal;
  font-weight: var(--bi-font-weight-bold);
  font-size: var(--bi-font-label-s);
  line-height: var(--bi-line-height-mini);
  letter-spacing: var(--bi-letter-spacing-normal);
}
/* Robust word wrapping and hyphenation for all typography utilities */
.bi-copy-s,
.bi-copy-m,
.bi-copy-l,
.bi-headline-s,
.bi-headline-m,
.bi-headline-l,
.bi-headline-xl,
.bi-headline-xxl,
.bi-label,
.bi-date {
  /* Prefer language-aware hyphenation; relies on lang attribute */
  hyphens: auto;
  /* Avoid overflow for very long words/URLs across browsers */
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Media Queries - Desktop (1200px+) */
@media (min-width: 1200px) {
  h1,
  .bi-headline-xxl {
    font-size: var(--bi-font-size-xxl);
  }

  h3,
  .bi-headline-l {
    font-size: var(--bi-font-size-lg);
  }

  .bi-copy-l {
    font-size: var(--bi-font-copy-xxl);
  }

  .bi-quote {
    font-size: var(--bi-font-copy-xxl);
  }
}
/**
 * Text Alignment Utilities
 * Applied by CMS rich text editor (CKEditor) toolbar buttons.
 */
/* Suppress Bootstrap Icons ::before on our utility classes */
.bi-text-left.bi-text-left::before,
.bi-text-center.bi-text-center::before,
.bi-text-right.bi-text-right::before,
.bi-text-justify.bi-text-justify::before {
  content: none;
}
.bi-text-left {
  text-align: left;
}
.bi-text-center {
  text-align: center;
}
.bi-text-right {
  text-align: right;
}
.bi-text-justify {
  text-align: justify;
}
/**
 * Spacing Utilities
 * Apply on any element to add or remove top/bottom padding.
 *
 * Tripled selector (`.x.x.x`) lifts specificity to (0,3,0). This is needed
 * to beat 2-class descendant rules like `.bi-section-base .bi-section-base
 * { padding: 0 }` (which zeros nested sections) — same specificity (0,2,0)
 * as a doubled utility, source order would decide and component CSS often
 * wins. (0,3,0) wins reliably while staying overridable by deliberate
 * higher-specificity rules.
 *
 * Values match the page rhythm: 40px mobile, 80px desktop ≥1200px.
 */
.bi-with-padding-top.bi-with-padding-top.bi-with-padding-top {
  padding-top: var(--bi-topbottom-default);
}
.bi-with-padding-bottom.bi-with-padding-bottom.bi-with-padding-bottom {
  padding-bottom: var(--bi-topbottom-default);
}
.bi-no-padding-top.bi-no-padding-top.bi-no-padding-top {
  padding-top: 0;
}
.bi-no-padding-bottom.bi-no-padding-bottom.bi-no-padding-bottom {
  padding-bottom: 0;
}
@media (min-width: 1200px) {
  .bi-with-padding-top.bi-with-padding-top.bi-with-padding-top {
    padding-top: 80px;
  }

  .bi-with-padding-bottom.bi-with-padding-bottom.bi-with-padding-bottom {
    padding-bottom: 80px;
  }
}
/**
 * Elevation System - Shadow and depth tokens
 */
/* ELEVATION CLASSES */
.bi-elevation-small {
  box-shadow: var(--bi-elevation-small);
}
.bi-elevation-big {
  box-shadow: var(--bi-elevation-big);
}
.bi-image--1-1 {
  aspect-ratio: 1/1;
}
.bi-image--16-9 {
  aspect-ratio: 16/9;
}
.bi-image--3-4 {
  aspect-ratio: 3/4;
}
.bi-image--21-9 {
  aspect-ratio: 21/9;
}
.bi-image--5-4 {
  aspect-ratio: 5/4;
}
.bi-image--4-3 {
  aspect-ratio: 4/3;
}
.bi-image--3-2 {
  aspect-ratio: 3/2;
}
.bi-image--16-10 {
  aspect-ratio: 16/10;
}
.bi-image--19-9 {
  aspect-ratio: 19/9;
}
.bi-image--2-1 {
  aspect-ratio: 2/1;
}
.bi-image--4-1 {
  aspect-ratio: 4/1;
}
.bi-image--5-2 {
  aspect-ratio: 5/2;
}
.bi-image--3-1 {
  aspect-ratio: 3/1;
}
.bi-image--round {
  aspect-ratio: 1/1;
  border-radius: 50%;
}
.bi-image--4-5 {
  aspect-ratio: 4/5;
}
.bi-image--3-4 {
  aspect-ratio: 3/4;
}
.bi-image--2-3 {
  aspect-ratio: 2/3;
}
.bi-image--side-wide {
  aspect-ratio: 21/9;
}
.bi-image--large {
  aspect-ratio: 3024/1300;
}
.bi-image--horizontal {
  aspect-ratio: 780/200;
}
.bi-avatar {
  border-radius: var(--bi-radius-full);
}
.bi-avatar--mini {
  width: 40px;
  height: 40px;
}
.bi-avatar--small {
  width: 120px;
  height: 120px;
}
.bi-avatar--medium {
  width: 240px;
  height: 240px;
}
.bi-image-wrapper {
  position: relative;
  display: inline-block;
}
.bi-image-wrapper .bi-img__img {
  display: block;
  height: auto;
}
[class*="bi-image-cpoyrights"] {
  cursor: default;
  position: absolute;
  bottom: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  max-height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 6px;
  font-size: 12px;
}
.bi-image-cpoyright--left {
  left: 0;
}
.bi-image-cpoyrights--right {
  right: 0;
}
.bi-image-cpoyright--black {
  color: black;
}
.bi-image-cpoyrights--white {
  color: white;
}
.bi-image-cpoyrights--light {
  background: rgba(255,255,255,.6);
}
.bi-image-cpoyrights--dark {
  background: rgba(0,0,0,.6);
}
/* Base styles */
/**
 * Core CSS - Base styles and CMS free text (Freitext) styling
 */
/* Essential box-sizing for all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Root element - Basic performance optimizations for fonts */
:root {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Body - Essential layout */
body {
  font-family: var(--bi-font-family-primary);
  margin: 0;
  min-height: 100vh;
}
/* Basic button reset */
button {
  font-family: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}
/* Container (Grid) */
@media (min-width: 1200px) {
  .bi-container {
    max-width: var(--bi-max-width-desktop);
    margin: 0 auto;
  }
}
@media (min-width: 1440px) {
  .bi-container {
    max-width: var(--bi-max-width-desktop-l);
  }
}
@media (min-width: 1920px) {
  .bi-container {
    max-width: var(--bi-max-width-desktop-xl);
  }
}
/* Visually hidden – accessible to screen readers only */
.bi-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.bi-hidden {
  display: none;
}
.bi-content-truncated > :last-child > * {
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black calc(100% - 100px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black calc(100% - 100px),
        transparent 100%
    );
}
/* ========================================
   HEADINGS
   ======================================== */
/* Reset margins; font styles are in typography.css */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
/* Spacing below headings before following content (not last element) */
h1:not(:last-child),
h2:not(:last-child),
h3:not(:last-child),
h4:not(:last-child),
h5:not(:last-child),
h6:not(:last-child) {
  margin-bottom: var(--bi-size-200);
}
/* ========================================
   PARAGRAPHS
   ======================================== */
/* Reset + bi-copy-m metrics for CMS free text output */
p {
  margin: 0;
  font-family: var(--bi-font-family-primary);
  font-size: var(--bi-font-copy-m);
  line-height: var(--bi-line-height-tight);
}
/* Add bottom margin between consecutive paragraphs */
p:not(:last-child) {
  margin-bottom: 16px;
}
/* Suppress paragraph margins inside links */
a > p {
  margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
ul,
ol,
li,
td,
th,
p {
  word-break: break-word;
  hyphens: auto;
}
/* ========================================
   LISTS
   ======================================== */
/* Reset — custom markers via ::before, no native bullets */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Default vertical spacing between list items (replaces the previous
   `ul, ol { display: flex; gap: 20px }`). Wrapped in :where() so it
   has zero specificity and any component-level li styling wins
   without needing !important. */
:where(li):where(:last-child) {
  margin-bottom: 20px;
}
/* Add bottom margin between consecutive lists */
ul:not(:last-child),
ol:not(:last-child) {
  margin-bottom: 16px;
}
/* Hanging indent: marker sits in the padding gutter so inline content
   (text, <a>, <strong>, <br>) flows and wraps as one stream. */
li {
  /* layout */
  position: relative;
  padding-left: 27px;
  /* dimensions */
  min-height: 24px;
  /* typography */
  font-family: var(--bi-font-family-primary);
  font-size: var(--bi-font-copy-m);
  line-height: 1.2;
  color: var(--bi-color-text-black);
}
/* Unordered bullet — dot, vertically centered on first line */
ul > li::before {
  content: '';
  position: absolute;
  left: 11.25px;
  top: 0.6em;
  transform: translateY(-50%);
  width: 4.5px;
  height: 4.5px;
  background: currentColor;
  border-radius: 50%;
}
/* Ordered number */
ol > li {
  counter-increment: list-item;
}
ol > li::before {
  content: counter(list-item) '.';
  position: absolute;
  left: 0;
  top: 0;
  width: 27px;
}
/* ========================================
   LINKS
   ======================================== */
/* Reset – component links are styled via BEM classes */
a {
  text-decoration: inherit;
  color: inherit;
  cursor: pointer;
  display: inherit;
  font: inherit;
  padding: 0;
  margin: 0;
  /*outline: none;*/
}
a:focus-visible {
  outline: 2px solid var(--bi-color-focus);
  outline-offset: 2px;
}
a > button,
.bi-button > a {
  outline: none;
  outline-offset: 0;
}
/* Content links – inside paragraphs, lists, tables, quotes, headings */
p a,
li a,
td a,
th a,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
label a,
blockquote a {
  color: var(--bi-color-link-primary);
  text-decoration: underline;
  display: inline;
}
p a:hover,
li a:hover,
td a:hover,
th a:hover,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
blockquote a:hover {
  color: var(--bi-color-link-primary-hover);
}
p a:active,
li a:active,
td a:active,
th a:active,
h1 a:active,
h2 a:active,
h3 a:active,
h4 a:active,
h5 a:active,
h6 a:active,
blockquote a:active {
  color: var(--bi-color-link-primary-active);
}
/* Text on dark backgrounds – white for contrast (standard lists only, not .bi-list cards) */
.bi-container-secondary li {
  color: var(--bi-color-container-white);
}
/* List cards (.bi-list, .bi-download-list) have their own white background —
   text and links stay dark even when the parent section is secondary. */
.bi-container-secondary .bi-list li,
.bi-container-secondary .bi-download-list li {
  color: var(--bi-color-text-black);
}
.bi-container-secondary .bi-list li a,
.bi-container-secondary .bi-download-list .bi-list-item__link {
  color: var(--bi-color-link-primary);
}
.bi-container-secondary .bi-list li a:hover,
.bi-container-secondary .bi-download-list .bi-list-item__link:hover {
  color: var(--bi-color-link-primary-hover);
}
.bi-container-secondary .bi-list li a:active,
.bi-container-secondary .bi-download-list .bi-list-item__link:active {
  color: var(--bi-color-link-primary-active);
}
.bi-container-secondary .bi-list li a:visited,
.bi-container-secondary .bi-download-list .bi-list-item__link:visited {
  color: var(--bi-color-link-primary-visited);
}
/* Content links on dark backgrounds – lighter color for contrast */
.bi-container-secondary p a,
.bi-container-secondary li a,
.bi-container-secondary td a,
.bi-container-secondary th a,
.bi-container-secondary h1 a,
.bi-container-secondary h2 a,
.bi-container-secondary h3 a,
.bi-container-secondary h4 a,
.bi-container-secondary h5 a,
.bi-container-secondary h6 a,
.bi-container-secondary blockquote a {
  color: var(--bi-color-brand-tertiary-200);
}
.bi-container-secondary p a:hover,
.bi-container-secondary li a:hover,
.bi-container-secondary td a:hover,
.bi-container-secondary th a:hover,
.bi-container-secondary h1 a:hover,
.bi-container-secondary h2 a:hover,
.bi-container-secondary h3 a:hover,
.bi-container-secondary h4 a:hover,
.bi-container-secondary h5 a:hover,
.bi-container-secondary h6 a:hover,
.bi-container-secondary blockquote a:hover {
  color: var(--bi-color-brand-tertiary-500);
}
/* ========================================
   BLOCKQUOTE
   ======================================== */
/* Styled to match the Quote component (italic, purple, no left border) */
blockquote {
  margin: 0;
  padding: 0;
  border: none;
  font-family: var(--bi-font-family-primary);
  font-style: italic;
  font-weight: var(--bi-font-weight-regular);
  font-size: var(--bi-font-copy-l);
  line-height: 140%;
  color: var(--bi-color-text-secondary);
  word-break: break-word;
}
/* Freitext blockquote on dark/secondary backgrounds */
.bi-container-secondary blockquote,
.bi-container-secondary .bi-quote-content .bi-quote-text {
  color: var(--bi-color-text-white);
}
/* Headings on dark/secondary backgrounds turn white via the
   --bi-color-text-secondary token flip in colors.css (typography.css applies
   that variable to h1/h2). Inside light-surface components we restore the
   token to the design's dark color so headings stay legible. Card variants
   with transparent backgrounds (teaser-shop, transparent) are excluded
   because they inherit the dark container behind them. */
.bi-container-secondary .bi-card:not(.bi-card--teaser-shop):not(.bi-card--transparent),
.bi-container-secondary .bi-card__content-card,
.bi-container-secondary .bi-accordion:not(.bi-container-secondary):not(.bi-container-secondary-light),
.bi-container-secondary .bi-download-list {
  --bi-color-text-secondary: var(--bi-color-brand-secondary-900);
}
/* ========================================
   TABLE
   ======================================== */
/* Full-width table with header row styling for CMS content */
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border-collapse: collapse;
  font-family: var(--bi-font-family-primary);
  font-size: var(--bi-font-copy-m);
  line-height: var(--bi-line-height-tight);
  margin-bottom: var(--bi-size-200);
}
th,
td {
  padding: var(--bi-size-150) var(--bi-size-200);
  text-align: left;
  border-bottom: var(--bi-border-width-thin) solid var(--bi-color-base-grey-200);
}
/* Bold header row with subtle background */
th {
  font-weight: var(--bi-font-weight-semibold);
  background-color: var(--bi-color-base-grey-050);
  color: var(--bi-color-text-black);
}
/* Contextual background – contrast with parent section */
.bi-container-white th,
.bi-container-grey th {
  background-color: var(--bi-color-surface);
}
/* ========================================
   IMAGES, HR
   ======================================== */
/* Responsive images — no wrapper class required for CMS <img>. Components use
   BEM classes (e.g. .bi-card__image, .bi-footer-logo__image) with explicit width. */
img {
  max-width: 100%;
  width: 100%;
  display: block;
  height: auto;
}
/* Styled divider using design token border color */
hr {
  border: none;
  border-top: var(--bi-border-width-thin) solid var(--bi-color-base-grey-200);
  margin: var(--bi-size-400) 0;
}
/* ========================================
   RESPONSIVE (1200px+)
   ======================================== */
@media (min-width: 1200px) {
  h1:not(:first-child),
  h2:not(:first-child),
  h3:not(:first-child),
  h4:not(:first-child),
  h5:not(:first-child),
  h6:not(:first-child) {
    margin-top: 80px;
  }

  /* Spacing below headings before following content (not last element) */
  h1:not(:last-child),
  h2:not(:last-child),
  h3:not(:last-child),
  h4:not(:last-child),
  h5:not(:last-child),
  h6:not(:last-child) {
    margin-bottom: 18px;
  }

  li {
    /* min-height: 32px; */
    margin-bottom: 8px;
  }

  /* ul gutter grows to 32px at desktop (6px dot + 13px on each side); ol gutter stays at 27px */
  ul > li {
    padding-left: 32px;
  }

  ul > li::before {
    left: 13px;
    width: 6px;
    height: 6px;
  }

  blockquote {
    font-size: var(--bi-font-copy-xl);
  }
}
@media (min-width: 1200px) {
  .bi-section-text {
    h1.bi-headline-xxl {
      font-size: 44px;
    }

    h2.bi-headline-xxl {
      font-size: 40px;
    }

    h3.bi-headline-xxl {
      font-size: 36px;
    }

    h4.bi-headline-xxl {
      font-size: 32px;
    }

    h5.bi-headline-xxl {
      font-size: 28px;
    }
  }
}
.bi-section-text {
  h1.bi-headline-xxl {
    margin-bottom: 28px;
  }

  h2.bi-headline-xxl {
    margin-bottom: 26px;
  }

  h3.bi-headline-xxl {
    margin-bottom: 24px;
  }

  h4.bi-headline-xxl {
    margin-bottom: 22px;
  }

  h5.bi-headline-xxl {
    margin-bottom: 20px;
  }

  h1.bi-headline-xxl,
  h2.bi-headline-xxl,
  h3.bi-headline-xxl,
  h4.bi-headline-xxl,
  h5.bi-headline-xxl {
    margin-top: 0px;
  }

  :is(blockquote, hr, p, p, pre, ol, table, ul) + h1.bi-headline-xxl {
    margin-top: 60px;
  }


  :is(blockquote, hr, p, p, pre, ol, table, ul) + h2.bi-headline-xxl {
    margin-top: 56px;
  }


  :is(blockquote, hr, p, p, pre, ol, table, ul) + h3.bi-headline-xxl {
    margin-top: 52px;
  }


  :is(blockquote, hr, p, p, pre, ol, table, ul) + h4.bi-headline-xxl {
    margin-top: 48px;
  }


  :is(blockquote, hr, p, p, pre, ol, table, ul) + h5.bi-headline-xxl {
    margin-top: 44px;
  }

  .bi-editorial-date {
    margin-bottom: 18px;
  }

  p {
    line-height: 150%;
  }

  p.no-margin {
    margin: 0;
  }
}
/* CUSTOM CORRECTIONS */
.synthetic-focus-border:focus-visible:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    box-shadow: inset 0 0 0 2px var(--bi-color-focus), inset 0 0 0 4px white;
}
/* Fonts */
/**
 * Poppins Font Family - Local Font Loading
 * Optimized for performance with WOFF2 and WOFF fallbacks
 */
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-extrabold-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-extrabold-woff.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-extralightitalic-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-extralightitalic-woff.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-bold-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-bold-woff.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-thinitalic-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-thinitalic-woff.woff') format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-black-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-black-woff.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-regular-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-regular-woff.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-extralight-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-extralight-woff.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-medium-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-medium-woff.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-semibolditalic-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-semibolditalic-woff.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-lightitalic-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-lightitalic-woff.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-blackitalic-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-blackitalic-woff.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-italic-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-italic-woff.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-thin-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-thin-woff.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-semibold-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-semibold-woff.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-extrabolditalic-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-extrabolditalic-woff.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-mediumitalic-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-mediumitalic-woff.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-bolditalic-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-bolditalic-woff.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src:
    url('/Technische-Medien/Assets/fonts/poppins-poppins-light-woff2.woff2') format('woff2'),
    url('/Technische-Medien/Assets/fonts/poppins-poppins-light-woff.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* 
 * Source Sans Pro Font Family - Local Font Loading
 * Optimized for performance with WOFF2 and WOFF fallbacks
 */
@font-face {
  font-family: 'Source Sans Pro';
  src:
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-200-normal-woff2.woff2')
      format('woff2'),
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-200-normal-woff.woff')
      format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src:
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-200-italic-woff2.woff2')
      format('woff2'),
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-200-italic-woff.woff')
      format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src:
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-300-normal-woff2.woff2')
      format('woff2'),
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-300-normal-woff.woff')
      format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src:
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-300-italic-woff2.woff2')
      format('woff2'),
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-300-italic-woff.woff')
      format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src:
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-400-normal-woff2.woff2')
      format('woff2'),
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-400-normal-woff.woff')
      format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src:
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-400-italic-woff2.woff2')
      format('woff2'),
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-400-italic-woff.woff')
      format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src:
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-600-normal-woff2.woff2')
      format('woff2'),
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-600-normal-woff.woff')
      format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src:
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-600-italic-woff2.woff2')
      format('woff2'),
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-600-italic-woff.woff')
      format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src:
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-700-normal-woff2.woff2')
      format('woff2'),
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-700-normal-woff.woff')
      format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src:
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-700-italic-woff2.woff2')
      format('woff2'),
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-700-italic-woff.woff')
      format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src:
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-900-normal-woff2.woff2')
      format('woff2'),
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-900-normal-woff.woff')
      format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src:
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-900-italic-woff2.woff2')
      format('woff2'),
    url('/Technische-Medien/Assets/fonts/source-sans-pro-source-sans-pro-latin-900-italic-woff.woff')
      format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
/* Components */
/* ATOMS */
/* AccordionItem Component Styles */
.bi-accordion-item {
  /* spacing */
  margin: 5px;
  /* layout */
  display: block;
  /* block container focus states - only button should show focus */
  &:focus,
  &:focus-visible,
  &:focus-within {
    outline: none;
    box-shadow: none;
  }
}
/* Trigger button - border stays under trigger to separate header from content */
.bi-accordion-item__trigger {
  /* layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* spacing */
  padding: 16px 15px 13px 20px;
  gap: 8px;
  /* border: always under trigger, above content */
  border-bottom: var(--bi-border-width) solid var(--bi-color-border-secondary);
  /* button reset */
  cursor: pointer;
  line-height: var(--bi-line-height-tight);
  text-align: left;
  /* color */
  color: var(--bi-color-text-secondary);
  /* transitions */
  transition: var(--transition-base);
}
.bi-accordion-item__trigger:focus {
  outline: none;
}
.bi-accordion-item__trigger:focus-visible {
  outline: 2px solid var(--bi-color-focus);
  outline-offset: 2px;
}
/* Trigger text */
.bi-accordion-item__trigger-text {
  flex: 1;
  min-width: 0;
  font-weight: var(--bi-font-weight-semibold);
  font-size: var(--bi-font-headline-l);
  letter-spacing: var(--bi-letter-spacing-medium);
  line-height: var(--bi-line-height-tight);
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
/* Trigger icon */
.bi-accordion-item__trigger-icon {
  /* layout */
  display: inline-block;
  flex-shrink: 0;
  /* spacing */
  padding: 0;
  /* transitions */
  transition: transform 0.2s ease;
  /* color */
  color: var(--bi-color-text-secondary);
  font-size: 16px;
  filter: drop-shadow(0.1px 0 0 currentColor) drop-shadow(-0.1px 0 0 currentColor);
}
/* Open state - rotate icon */
.bi-accordion-item--open .bi-accordion-item__trigger-icon {
  transform: rotate(180deg);
}
/* Content panel */
.bi-accordion-item__wrapper {
  /* spacing */
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition:
    grid-template-rows 0.35s ease-out,
    opacity 0.35s ease-out;
}
.bi-accordion-item__content-inner {
  /* hides content when collapsed — visibility prevents focus on child elements */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  visibility: hidden;
}
/* Open state - content */
.bi-accordion-item--open .bi-accordion-item__wrapper {
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s ease-out;
  opacity: 1;
}
.bi-accordion-item--open .bi-accordion-item__content-inner {
  visibility: visible;
}
/* Description */
.bi-accordion-item__description {
  /* layout */
  display: block;
  line-height: var(--bi-line-height-tight);
  padding: 18px 20px;
  /* color */
  color: var(--bi-color-text-black);
}
/* Button wrapper */
.bi-accordion-item__button {
  /* layout */
  display: flex;
  justify-content: flex-start;
  width: 100%;
  /* spacing */
  padding: 18px 20px;
}
/* When button follows description, no extra top spacing */
.bi-accordion-item__description + .bi-accordion-item__button {
  padding-top: 0;
}
/* Responsive adjustments */
@media (min-width: 1200px) {
  .bi-accordion-item {
    padding: 0 16px;
  }
  .bi-accordion-item__trigger {
    /* spacing */
    padding: 20px 13px 20px 0;
  }

  .bi-accordion-item__trigger-text {
    font-size: var(--bi-font-headline-m);
    letter-spacing: var(--bi-letter-spacing-normal);
    line-height: var(--bi-line-height-tight);
    font-weight: var(--bi-font-weight-semibold);
  }

  .bi-accordion-item__trigger-icon {
    font-size: 26px;
    -webkit-text-stroke: 0.2px currentColor;
  }

  .bi-accordion-item--open .bi-accordion-item__description {
    /* spacing */
    padding: 21px 4px 18px 4px;
  }

  .bi-accordion-item__button {
    padding: 0 8px 18px;
  }
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .bi-accordion-item__trigger-icon,
  .bi-accordion-item__wrapper {
    transition: none;
  }
}
/* Blue background variant */
.bi-accordion-item--on-blue .bi-accordion-item__trigger {
  border-bottom-color: var(--bi-color-text-light-grey);
}
/* badge component styles */
.bi-badge {
  /* layout */
  display: flex;
  align-items: center;
  justify-content: center;
  /* dimensions */
  width: fit-content;
  height: auto;
  /* spacing */
  padding: 0;
  /* colors */
  background-color: transparent;
}
/* image sizing – mobile first (48 × 33) */
.bi-badge__image {
  display: block;
  width: 40px;
  height: auto;
}
/* desktop sizing (59 × 40) */
@media (min-width: 1200px) {
  .bi-badge__image {
    width: 48.5px;
  }
}
/* Button styles */
.bi-button {
  /* layout */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* dimensions */
  width: fit-content;
  min-height: 40px;
  /* spacing */
  padding: 0 32.5px;
  gap: 5px;
  /* border */
  border-radius: var(--bi-radius-full);
  /* typography */
  letter-spacing: 0;
  /* text decoration */
  text-decoration: none;
  /* transition */
  transition: var(--transition-base);

  /* Inner link element */
  .bi-button__link {
    /* layout */
    display: flex;
    align-items: center;
    /* color */
    color: inherit;

    i {
      margin-left: 5px;
    }

    &:focus,
    &:focus-visible,
    &:-moz-focusring {
      outline: none;
    }
  }

  /* Icon element */
  .bi-button__icon {
    line-height: 0;
  }

  .bi-button__icon .bi-custom-icon {
    font-size: 12px;
    color: inherit;

    &::before {
      color: inherit;
    }
  }

  /* Base interactive states */
  &:hover {
    cursor: pointer;
  }

  /* Remove default outline on any focus; visible focus ring only via :focus-visible (keyboard) */
  &:focus {
    outline: none;
  }

  &:-moz-focusring {
    outline: none;
  }

  /* PRIMARY */
  &.bi-button--primary {
    background-color: var(--bi-color-button-primary);
    color: var(--bi-color-button-primary-text);

    &:hover {
      background-color: var(--bi-color-button-primary-hover);
    }

    &:active {
      background-color: var(--bi-color-button-primary-active);
    }

    &:focus-visible,
    &:has(:focus-visible) {
      outline: none;
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
    }
  }

  /* SECONDARY */
  &.bi-button--secondary {
    /* spacing */
    padding: 4px 12px 4px 0px;
    /* border */
    border-radius: unset;
    /* color */
    background-color: transparent;
    color: var(--bi-color-text-secondary);
    /* typography */
    font-weight: var(--bi-font-weight-semibold);

    &:hover {
      background-color: transparent;
      color: var(--bi-color-button-secondary-hover);
    }

    &:active {
      background-color: transparent;
      color: var(--bi-color-button-secondary-active);
    }

    &:focus-visible,
    &:has(:focus-visible) {
      outline: none;
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
    }
  }

  /* ACTION */
  &.bi-button--action {
    /* layout */
    justify-content: flex-start;
    /* dimensions */
    width: 278px;
    height: 69.5px;
    /* spacing */
    padding: 0 24px;
    gap: 32px;
    /* color */
    /* background-color: var(--bi-color-brand-grey); */
    background-color: white;
    box-shadow: inset 0 0 0 3px var(--bi-color-brand-grey);
    /* color: var(--bi-color-brand-primary); */
    color: var(--accessibility-color-crimson);

    .bi-button__icon {
      flex-shrink: 0;
      font-size: 45px;
      line-height: 1;
    }

    &:hover {
      /* background-color: var(--bi-color-brand-grey-hover); */
      background-color: white;
    }

    &:active {
      /* background-color: var(--bi-color-brand-grey-active); */
      background-color: white;
    }

    &:focus-visible {
      background-color: var(--bi-color-brand-grey-hover);
      outline: none;
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
    }
  }

  /* ACTION — contextual background (white on grey/secondary, same as Card) */
  .bi-container-white &.bi-button--action,
  .bi-container-grey &.bi-button--action {
    background-color: var(--bi-color-surface);
  }

  .bi-container-secondary &.bi-button--action {
    background-color: var(--bi-color-container-white);
  }

  /* ICON-ONLY */
  &.bi-button--icon-only {
    /* border */
    border-radius: 0;
    /* dimensions */
    width: 48px;
    height: 50px;
    /* spacing */
    padding: 0 11px;
    /* color */
    color: var(--bi-color-brand-grey-active);

    .bi-button__icon .bi-custom-icon {
      font-size: 50px;
    }

    &:focus-visible,
    &:has(:focus-visible) {
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .bi-button {
    transition: none;
  }
}
/* Card styles */
.bi-card {
  /* layout */
  display: block;
  /* dimensions */
  width: 100%;
  /* spacing */
  padding: 24px 16px;
  /* color */
  background-color: var(--bi-color-container-white);
  color: var(--bi-color-text-dark-grey);
  /* transitions */
  transition: box-shadow 0.2s ease-in-out;

  .bi-card__headline {
    margin: 0;
  }
}
/* Contextual background – contrast with parent section */
.bi-container-white .bi-card,
.bi-container-grey .bi-card {
  background-color: var(--bi-color-surface);
}
/* Card without padding */
.bi-card--no-padding {
  padding: 0;
}
/* Responsive adjustments */
@media (min-width: 1200px) {
  .bi-card {
    padding: 24px;
    height: 100%;

    .bi-card__headline {
      margin: 0;
    }
  }

  .bi-card--no-padding {
    padding: 0;
  }
}
/* Checkbox wrapper */
.bi-checkbox {
  /* layout */
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
/* Native input — hidden, replaced by custom box */
.bi-checkbox__input {
  /* behavior */
  appearance: none;
  -webkit-appearance: none;
  /* position */
  position: relative;
  /* layout */
  flex-shrink: 0;
  /* dimensions */
  width: 20px;
  height: 20px;
  /* spacing */
  margin: 2px 0 0 0;
  padding: 0;
  /* border */
  border: none;
  border-radius: 0;
  /* color */
  background-color: var(--bi-color-brand-tertiary);
  /* behavior */
  cursor: pointer;
  transition: var(--transition-base);

  &::after {
    /* content */
    content: '';
    /* position */
    position: absolute;
    top: 2px;
    left: 3px;
    /* dimensions */
    width: 16px;
    height: 14px;
    /* color */
    background-color: var(--bi-color-brand-secondary);
    /* mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5 8.5 6.5 12.5 13.5 4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5 8.5 6.5 12.5 13.5 4'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    /* behavior */
    opacity: 0;
    transition: opacity var(--transition-base);
  }

  &:checked::after {
    opacity: 1;
  }

  &:hover {
    background-color: var(--bi-color-brand-tertiary-hover);
  }

  &:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--bi-color-focus-inner),
      0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
  }
}
/* Label */
.bi-checkbox__label {
  /* spacing */
  padding-top: 4px;
  /* typography */
  font-size: var(--bi-font-copy-s);
  line-height: var(--bi-line-height-tight);
  /* color */
  color: var(--bi-color-text-black);
  /* behavior */
  cursor: pointer;
}
/* Required — asterisk after label */
.bi-checkbox--required .bi-checkbox__label::after {
  /* content */
  content: '*';
  /* color */
  color: var(--bi-color-brand-primary);
}
/* Error state — opt-in via the `--error` modifier (server-side invalid) */
.bi-checkbox--error .bi-checkbox__input {
  background-color: var(--bi-color-functional-error-light);
  border: 1px solid var(--bi-color-functional-error);

  &::after {
    background-color: var(--bi-color-functional-error);
  }
}
.bi-checkbox--error .bi-checkbox__label {
  color: var(--bi-color-functional-error);
}
/* Disabled state */
.bi-checkbox--disabled .bi-checkbox__input {
  background-color: var(--bi-color-container-grey);
  border: 1px solid var(--bi-color-base-grey-400);
  cursor: not-allowed;

  &::after {
    opacity: 0;
  }
}
.bi-checkbox--disabled .bi-checkbox__label {
  color: var(--bi-color-brand-grey-mid);
  cursor: not-allowed;
}
/* Dark (secondary) background */
.bi-container-secondary .bi-checkbox__label {
  color: var(--bi-color-container-white);
}
.bi-container-secondary .bi-checkbox__input {
  background-color: var(--bi-color-container-white);
}
.bi-container-secondary .bi-checkbox--error .bi-checkbox__label {
  color: var(--bi-color-functional-error);
}
/* Chip styles */
.bi-chip {
  /* layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* dimensions */
  min-height: 24px;
  /* spacing */
  padding-left: 16px;
  padding-right: 16px;
  gap: 8px;
  /* border */
  border-radius: var(--bi-radius-full);
  /* color */
  /* background-color: var(--bi-color-brand-tertiary); */
  background-color: var(--accessibility-color-blue-violet);
  /* color: var(--bi-color-text-secondary); */
  color: white;

  &:focus {
    outline: none;
  }

  &:focus-visible,
  &:focus-within {
    outline: none;
    box-shadow:
      0 0 0 2px var(--bi-color-focus-inner),
      0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
  }

  /* Closable – active/selected chip with close button */
  &.bi-chip--closable {
    /* spacing */
    padding-right: 12px;
    /* color */
    background-color: var(--bi-color-brand-primary);
    color: var(--bi-color-text-white);

    .bi-chip__close {
      /* dimensions */
      width: auto;
      height: auto;
      min-height: unset;
      /* spacing */
      padding: 0;
      /* color */
      color: var(--bi-color-text-white);
      /* typography */
      font-size: 11.5px;
      -webkit-text-stroke: 1px;
      /* outline */
      outline: none;
    }

    &:hover {
      background-color: var(--bi-color-brand-primary-hover);
    }

    &:active {
      background-color: var(--bi-color-brand-primary-active);
    }

    &:focus-visible,
    &:focus-within {
      outline: none;
      box-shadow: none;
    }
  }

  /* Link – clickable chip rendered as <a> */
  &.bi-chip--link {
    cursor: pointer;
    text-decoration: none;

    &:hover {
      /* background-color: var(--bi-color-button-secondary-hover); */
      background-color: var(--accessibility-color-blue-violet-dark);
      color: var(--bi-color-text-white);
    }

    &:active {
      /* background-color: var(--bi-color-brand-tertiary-hover); */
      background-color: var(--accessibility-color-crimson);
    }

    &:focus-visible,
    &:focus-within {
      outline: none;
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
    }
  }
}
/* FooterLink Component - Specific styling for footer links */
.bi-footer-link {
  position: relative;
  color: var(--bi-color-text-white);
  text-decoration: none;
  white-space: pre-wrap;
  cursor: pointer;

  /* separator after each link */
  &:not(:last-child)::after {
    content: '|';
    margin-left: 4px;
    margin-right: 4px;
    font-size: var(--bi-font-copy-s);
    color: var(--bi-color-text-white);
    user-select: none;
  }

  &:hover,
  &:active {
    text-decoration: underline;
  }

  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--bi-color-focus);
    outline-offset: 2px;
  }
}
/* The badge ships inside the h1 markup either way, but is hidden by default.
   The base `bi-h1-with-badge` class keeps the badge in the DOM yet invisible;
   adding the `--active` modifier promotes the h1 to a positioning context and
   reveals the badge in the top-right corner. */
.bi-h1-with-badge .bi-badge {
  display: none;
}
.bi-h1-with-badge--active {
  position: relative;
}
.bi-h1-with-badge--active .bi-badge {
  display: flex;
  position: absolute;
  top: -30px;
  right: 0;
  z-index: 1;
}
/* Icon – default color when no color prop is set */
.bi-custom-icon::before {
  color: var(--bi-color-brand-primary);
}
/* ImageStripe – full-width image strip between content sections */
.bi-image-stripe {
  width: 100%;
  overflow: hidden;
}
.bi-image-stripe__img {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover;
}
@media (min-width: 768px) {
  .bi-image-stripe__img {
    height: 198px;
  }
}
/* DateInput wrapper */
.bi-date-input-wrapper {
  /* layout */
  display: flex;
  flex-direction: column;
  gap: var(--bi-gap-medium);
  /* dimensions */
  width: 100%;
}
/* DateInput label */
.bi-date-input__label {
  /* typography */
  font-size: var(--bi-font-copy-s);
  /* color */
  color: var(--bi-color-base-grey-900);
}
/* Required indicator */
.bi-date-input-wrapper--required {
  & .bi-date-input__label::after {
    /* content */
    content: '*';
    /* color */
    color: var(--bi-color-brand-primary-750);
  }
}
/* DateInput field */
.bi-date-input {
  /* layout */
  display: flex;
  align-items: center;
  position: relative;
  /* dimensions */
  width: 100%;
  height: 48px;
  /* spacing */
  padding: 12px 44px 12px 12px;
  /* border */
  border: 1px solid transparent;
  border-radius: var(--bi-radius-none);
  /* typography */
  font-size: var(--bi-font-copy-s);
  font-family: inherit;
  /* color */
  color: var(--bi-color-text-dark-grey);
  /* behavior */
  box-sizing: border-box;
  transition: var(--transition-base);

  &:hover {
    outline: none;
    border-color: var(--bi-color-brand-secondary);
  }

  &:focus {
    outline: none;
    border-color: var(--bi-color-brand-secondary);
  }

  /* Push the datetime text to the left so the indicator ends up far right */
  &::-webkit-datetime-edit {
    flex: 1;
  }

  /* Native calendar picker indicator — replace the UA glyph with a masked box
     so the icon color flows from a semantic token. */
  &::-webkit-calendar-picker-indicator {
    /* position */
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    /* dimensions */
    width: 18px;
    height: 18px;
    /* spacing */
    padding: 0;
    margin: 0;
    /* color */
    background-image: none;
    background-color: var(--bi-color-brand-secondary);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z'/><path d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z'/><path d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
    /* behavior */
    cursor: pointer;
    opacity: 1;
  }

  &:hover::-webkit-calendar-picker-indicator,
  &:focus::-webkit-calendar-picker-indicator {
    background-color: var(--bi-color-brand-secondary-hover);
  }

  /* Background variants */
  &.bi-date-input--white {
    background-color: var(--bi-color-container-white);

    &:disabled {
      background-color: var(--bi-color-container-grey);
    }
  }

  &.bi-date-input--gray {
    background-color: var(--bi-color-base-grey-100);

    &:disabled {
      background-color: var(--bi-color-container-grey);
    }
  }

  /* Error state — opt-in via the `--error` modifier (server-side invalid) */
  &.bi-date-input--error {
    background-color: var(--bi-color-functional-error-light);
    color: var(--bi-color-functional-error);

    &::-webkit-calendar-picker-indicator {
      background-color: var(--bi-color-functional-error);
    }
  }

  /* Disabled state — after variants so grey bg always wins */
  &:disabled {
    cursor: not-allowed;
    background-color: var(--bi-color-container-grey);
    color: var(--bi-color-base-grey-550);

    &::-webkit-calendar-picker-indicator {
      cursor: not-allowed;
      background-color: var(--bi-color-base-grey-550);
    }
  }
}
/* Container-adaptive backgrounds — follow --bi-color-surface pattern */
.bi-container-white .bi-date-input:not(.bi-date-input--error):not(:disabled),
.bi-container-grey .bi-date-input:not(.bi-date-input--error):not(:disabled) {
  background-color: var(--bi-color-surface);
}
/* Grey background — lighter disabled bg so it's distinguishable from the page */
.bi-container-grey .bi-date-input:disabled {
  background-color: var(--bi-color-base-grey-050);
}
/* Dark (secondary) background — white label text */
.bi-container-secondary .bi-date-input__label {
  color: var(--bi-color-container-white);
}
/* Dropdown — progressively enhanced native <select>.
   Pre-enhancement, users see the native <select> styled to match the rest
   of the UI. Once `initDropdown` runs, the native is visually hidden (but
   remains the form control) and the custom button + listbox take over. */
.bi-dropdown-wrapper {
  /* layout */
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* dimensions */
  width: 100%;
}
.bi-dropdown__label {
  /* typography */
  font-size: var(--bi-font-copy-s);
  line-height: var(--bi-line-height-tight);
  /* color */
  color: var(--bi-color-text-dark-grey);
}
.bi-dropdown-wrapper--required .bi-dropdown__label::after {
  /* content */
  content: '*';
  /* color */
  color: var(--bi-color-brand-primary);
}
/* Dropdown root — position anchor for listbox */
.bi-dropdown {
  /* position */
  position: relative;
  /* dimensions */
  width: 100%;
}
/* ── Native <select> ─────────────────────────────────────────────────────
   Visible by default — JS-off fallback. Styled to match the branded trigger. */
.bi-dropdown__native {
  /* layout */
  display: block;
  /* dimensions */
  width: 100%;
  height: 48px;
  /* spacing */
  padding: 12px 40px 12px 12px;
  /* typography */
  font-size: var(--bi-font-copy-s);
  font-family: inherit;
  line-height: var(--bi-line-height-tight);
  /* color */
  color: var(--bi-color-text-dark-grey);
  background-color: var(--bi-color-container-white);
  /* border */
  border: 1px solid transparent;
  border-radius: var(--bi-radius-none);
  /* chevron as background */
  background-image: linear-gradient(45deg, transparent 50%, var(--bi-color-brand-secondary) 50%),
                    linear-gradient(135deg, var(--bi-color-brand-secondary) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  /* behavior */
  box-sizing: border-box;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: var(--transition-base);
}
.bi-dropdown--gray .bi-dropdown__native {
  background-color: var(--bi-color-base-grey-100);
}
.bi-dropdown__native:hover,
.bi-dropdown__native:focus,
.bi-dropdown__native:focus-visible {
  outline: none;
  border-color: var(--bi-color-brand-secondary);
}
.bi-dropdown__native:disabled {
  cursor: not-allowed;
  background-color: var(--bi-color-container-grey);
  color: var(--bi-color-base-grey-550);
}
/* Visually-hide the native once enhanced. It stays submittable & validatable
   and accessible to assistive-tech via our own ARIA exposure on the trigger. */
.bi-dropdown--enhanced .bi-dropdown__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
/* ── Custom trigger (post-enhancement) ──────────────────────────────────── */
.bi-dropdown__trigger {
  /* layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* dimensions */
  width: 100%;
  height: 48px;
  /* spacing */
  padding: 12px;
  /* border */
  border: 1px solid transparent;
  border-radius: var(--bi-radius-none);
  /* typography */
  font-size: var(--bi-font-copy-s);
  font-family: inherit;
  line-height: var(--bi-line-height-tight);
  text-align: left;
  /* color */
  color: var(--bi-color-text-dark-grey);
  /* behavior */
  box-sizing: border-box;
  cursor: pointer;
  transition: var(--transition-base);

  .bi-dropdown--white & {
    background-color: var(--bi-color-container-white);
  }

  .bi-dropdown--gray & {
    background-color: var(--bi-color-base-grey-100);
  }

  &:hover,
  &:focus,
  &:focus-visible {
    outline: none;
    border-color: var(--bi-color-brand-secondary);
  }

  .bi-dropdown--open:not(.bi-dropdown--error) & {
    border-color: var(--bi-color-brand-secondary);
    background-color: var(--bi-color-brand-grey);
  }

  .bi-dropdown--open.bi-dropdown--error & {
    border-color: var(--bi-color-functional-error);
  }

  &:disabled {
    cursor: not-allowed;
    background-color: var(--bi-color-container-grey);
    border-color: transparent;
    color: var(--bi-color-base-grey-550);

    .bi-dropdown__value--placeholder {
      color: var(--bi-color-base-grey-550);
    }

    .bi-dropdown__icon {
      color: var(--bi-color-base-grey-550);
      -webkit-text-stroke-color: var(--bi-color-base-grey-550);
    }
  }
}
.bi-dropdown__value {
  /* layout */
  flex: 1;
  min-width: 0;
  /* overflow */
  overflow: hidden;
  /* typography */
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bi-dropdown__value--placeholder {
  color: var(--bi-color-text-dark-grey);
}
/* Chevron icon — rotates when open */
.bi-dropdown__icon {
  /* layout */
  flex-shrink: 0;
  /* dimensions */
  width: 24px;
  height: 24px;
  /* typography */
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  /* color */
  color: var(--bi-color-brand-secondary);
  /* behavior */
  -webkit-text-stroke: 0.8px var(--bi-color-brand-secondary);
  transition: transform var(--transition-base);

  .bi-dropdown--open & {
    transform: rotate(180deg);
  }
}
/*
 * Error state — opt-in via the `--error` modifier (server-side invalid).
 * Applied to both the native select and the enhanced custom trigger so
 * the visual is identical whether JS enhancement ran or not.
 */
.bi-dropdown--error .bi-dropdown__native,
.bi-dropdown--error .bi-dropdown__trigger {
  background-color: var(--bi-color-functional-error-light);
  color: var(--bi-color-functional-error);
}
.bi-dropdown--error .bi-dropdown__trigger {
  & .bi-dropdown__value--placeholder {
    color: var(--bi-color-functional-error);
  }

  & .bi-dropdown__icon {
    color: var(--bi-color-functional-error);
  }

  &:hover,
  &:focus-visible {
    border-color: var(--bi-color-functional-error);
  }
}
/* ── Listbox (post-enhancement) ─────────────────────────────────────────── */
.bi-dropdown__listbox {
  /* position */
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  /* dimensions */
  width: 100%;
  max-height: 0;
  /* spacing — reset the global ul `gap: 20px` so options sit flush */
  margin: 0;
  padding: 0;
  gap: 0;
  /* overflow */
  overflow: hidden;
  /* list */
  list-style: none;
  /* color */
  background-color: var(--bi-color-container-white);
  /* behavior */
  box-sizing: border-box;
  visibility: hidden;
  pointer-events: none;
  /* scroll — keyboard-focused item gets breathing room from edges */
  scroll-padding-block: 4px;

  .bi-dropdown--open & {
    visibility: visible;
    pointer-events: auto;
    /* Cap height to available viewport space below the trigger.
       `--bi-dropdown-listbox-max-height` is set by initDropdown on open;
       the 50vh fallback keeps the no-JS / pre-measurement state sensible. */
    max-height: var(--bi-dropdown-listbox-max-height, 50vh);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  & > li:not(:last-child) {
    margin-bottom: 0;
  }

  & > li::before {
    content: none;
  }

  /* Subtle scrollbar — hidden until hover/scroll, matching ThemeModule pattern */
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--bi-color-base-grey-300);
    border-radius: 8px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }
}
.bi-dropdown__item {
  /* layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  /* dimensions – the parent <ul> is a flex column (global core.css);
     pin flex-shrink so items keep their natural height when the listbox
     hits its max-height and scrolls, rather than compressing to fit. */
  flex-shrink: 0;
  min-height: 0;
  /* spacing */
  padding: 12px;
  margin-bottom: 0;
  /* typography */
  font-size: var(--bi-font-copy-s);
  font-family: inherit;
  line-height: var(--bi-line-height-tight);
  /* color */
  color: var(--bi-color-base-grey-550);
  background-color: var(--bi-color-container-white);
  /* behavior */
  box-sizing: border-box;
  cursor: pointer;
  transition: var(--transition-base);

  &:not(.bi-dropdown__item--disabled):hover,
  &:not(.bi-dropdown__item--disabled):focus {
    outline: none;
    background-color: var(--bi-color-base-grey-050);
    box-shadow:
      inset 1px 0 0 var(--bi-color-brand-secondary),
      inset -1px 0 0 var(--bi-color-brand-secondary),
      inset 0 -1px 0 var(--bi-color-brand-secondary);
    color: var(--bi-color-text-black);
  }

  &[aria-selected='true'] {
    color: var(--bi-color-text-dark-grey);
  }

  &.bi-dropdown__item--disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
}
.bi-dropdown__item-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Container-adaptive backgrounds — follow --bi-color-surface pattern */
.bi-container-white .bi-dropdown:not(.bi-dropdown--error) .bi-dropdown__trigger,
.bi-container-grey .bi-dropdown:not(.bi-dropdown--error) .bi-dropdown__trigger,
.bi-container-white .bi-dropdown:not(.bi-dropdown--error) .bi-dropdown__native,
.bi-container-grey .bi-dropdown:not(.bi-dropdown--error) .bi-dropdown__native {
  background-color: var(--bi-color-surface);
}
.bi-container-white .bi-dropdown--open:not(.bi-dropdown--error) .bi-dropdown__trigger,
.bi-container-grey .bi-dropdown--open:not(.bi-dropdown--error) .bi-dropdown__trigger {
  background-color: var(--bi-color-base-grey-050);
}
.bi-container-grey .bi-dropdown__listbox,
.bi-container-grey .bi-dropdown__item {
  background-color: var(--bi-color-surface);
}
.bi-container-grey .bi-dropdown__item:hover,
.bi-container-grey .bi-dropdown__item:focus {
  background-color: var(--bi-color-base-grey-050);
}
.bi-container-grey .bi-dropdown__trigger:disabled,
.bi-container-grey .bi-dropdown__native:disabled {
  background-color: var(--bi-color-base-grey-050);
}
.bi-container-secondary .bi-dropdown__label {
  color: var(--bi-color-container-white);
}
.bi-container-secondary .bi-dropdown__trigger,
.bi-container-secondary .bi-dropdown__native {
  border-color: var(--bi-color-container-white);
}
.bi-container-secondary .bi-dropdown--open:not(.bi-dropdown--error) .bi-dropdown__trigger {
  background-color: var(--bi-color-container-white);
  border-color: var(--bi-color-container-white);
}
/* Semantic variants on individual options. Hover/focus/selected states would
   otherwise override `color`, so each interactive state is included. */
.bi-dropdown__item[data-variant='danger'],
.bi-dropdown__item[data-variant='danger']:not(.bi-dropdown__item--disabled):hover,
.bi-dropdown__item[data-variant='danger']:not(.bi-dropdown__item--disabled):focus,
.bi-dropdown__item[data-variant='danger'][aria-selected='true'] {
  color: var(--bi-color-functional-error);
}
/* Input wrapper */
.bi-input-wrapper {
  /* layout */
  display: flex;
  flex-direction: column;
  gap: var(--bi-gap-medium);
  /* dimensions */
  width: 100%;
}
/* Input label */
.bi-input__label {
  /* typography */
  font-size: var(--bi-font-copy-s);
  /* color */
  color: var(--bi-color-base-grey-900);
}
/* Required indicator */
.bi-input-wrapper--required {
  & .bi-input__label::after {
    /* content */
    content: '*';
    /* color */
    color: var(--bi-color-brand-primary-750);
  }
}
/* Password wrapper */
.bi-input-wrapper--password {
  /* position */
  position: relative;

  & .bi-input {
    /* spacing */
    padding-right: 44px;
  }

  & .bi-input__password-toggle {
    /* position */
    position: absolute;
    right: 0;
    bottom: 0;
    /* dimensions */
    width: auto;
    /* color */
    color: var(--bi-color-brand-grey-mid);
    /* behavior */
    cursor: pointer;

    &:hover {
      /* color */
      color: var(--bi-color-text-black);
    }

    &:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
    }

    &.bi-button--icon-only {
      /* spacing */
      padding: 0 12px;
    }
  }
}
/* Search wrapper */
.bi-input-wrapper--search {
  /* position */
  position: relative;

  & .bi-input {
    /* spacing */
    padding-right: 44px;
  }

  & .bi-input__search-clear-wrap {
    /* position — take over the absolute anchor so hidden toggle works */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    /* layout */
    display: flex;
    align-items: center;

    &[hidden] {
      display: none;
    }
  }

  & .bi-input__search-action {
    /* position — now relative inside the wrapper */
    position: static;
    /* dimensions */
    width: auto;
    /* color */
    color: var(--bi-color-brand-secondary);
    /* behavior */
    -webkit-text-stroke: 1.2px currentColor;
    cursor: pointer;

    &:hover {
      /* color */
      color: var(--bi-color-brand-secondary-hover);
    }

    &:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
    }

    &.bi-button--icon-only {
      /* spacing */
      padding: 0 12px;
    }
  }
}
/* Input styles */
.bi-input {
  /* layout */
  display: flex;
  align-items: center;
  /* dimensions */
  width: 100%;
  height: 48px;
  /* spacing */
  padding: 12px;
  /* border */
  border: 1px solid transparent;
  border-radius: var(--bi-radius-none);
  /* typography */
  font-size: var(--bi-font-copy-s);
  font-family: inherit;
  /* color */
  color: var(--bi-color-text-dark-grey);
  /* behavior */
  box-sizing: border-box;
  transition: var(--transition-base);

  &::placeholder {
    /* color */
    color: var(--bi-color-text-dark-grey);
  }

  &:hover {
    outline: none;
    border-color: var(--bi-color-brand-secondary);
  }

  &:focus {
    outline: none;
    border-color: var(--bi-color-brand-secondary);
  }

  /* Background variants */
  &.bi-input--white {
    background-color: var(--bi-color-container-white);

    &:disabled {
      background-color: var(--bi-color-container-grey);
    }
  }

  &.bi-input--gray {
    background-color: var(--bi-color-base-grey-100);

    &:disabled {
      background-color: var(--bi-color-container-grey);
    }
  }

  /* Search — hide all native decorations (custom button replaces them) */
  &[type='search'] {
    -webkit-appearance: none;
    appearance: none;

    &::-webkit-search-decoration,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration,
    &::-webkit-search-cancel-button {
      -webkit-appearance: none;
      display: none;
    }
  }

  /* Error state — opt-in via the `--error` modifier (server-side invalid) */
  &.bi-input--error {
    background-color: var(--bi-color-functional-error-light);
    color: var(--bi-color-functional-error);

    &::placeholder {
      color: var(--bi-color-functional-error);
    }
  }

  /* Disabled state — after variants so grey bg always wins */
  &:disabled {
    cursor: not-allowed;
    background-color: var(--bi-color-container-grey);
    color: var(--bi-color-base-grey-550);

    &::placeholder {
      color: var(--bi-color-base-grey-550);
    }
  }
}
/* Container-adaptive backgrounds — follow --bi-color-surface pattern */
.bi-container-white .bi-input:not(.bi-input--error):not(:disabled),
.bi-container-grey .bi-input:not(.bi-input--error):not(:disabled) {
  background-color: var(--bi-color-surface);
}
/* Grey background — lighter disabled bg so it's distinguishable from the page */
.bi-container-grey .bi-input:disabled {
  background-color: var(--bi-color-base-grey-050);
}
/* Dark (secondary) background — white label text */
.bi-container-secondary .bi-input__label {
  color: var(--bi-color-container-white);
}
/* ListItem styles are now in core.css (global li/ul/ol rules) */
/* RadioButton wrapper */
.bi-radio {
  /* layout */
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
/* Native input — hidden, replaced by custom circle */
.bi-radio__input {
  /* behavior */
  appearance: none;
  -webkit-appearance: none;
  /* position */
  position: relative;
  /* layout */
  flex-shrink: 0;
  /* dimensions */
  width: 20px;
  height: 20px;
  /* spacing */
  margin: 2px 0 0 0;
  padding: 0;
  /* border */
  border: none;
  border-radius: 50%;
  /* color */
  background-color: var(--bi-color-brand-tertiary);
  /* behavior */
  cursor: pointer;
  transition: var(--transition-base);

  /* Inner dot */
  &::after {
    /* content */
    content: '';
    /* position */
    position: absolute;
    top: 50%;
    left: 50%;
    /* dimensions */
    width: 10px;
    height: 10px;
    /* border */
    border-radius: 50%;
    /* color */
    background-color: var(--bi-color-brand-secondary);
    /* behavior */
    transform: translate(-50%, -50%) scale(0);
    transition: transform var(--transition-base);
  }

  &:checked::after {
    transform: translate(-50%, -50%) scale(1);
  }

  &:hover {
    background-color: var(--bi-color-brand-tertiary-hover);
  }

  &:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--bi-color-focus-inner),
      0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
  }
}
/* Label */
.bi-radio__label {
  /* spacing */
  padding-top: 4px;
  /* typography */
  font-size: var(--bi-font-copy-s);
  line-height: var(--bi-line-height-tight);
  /* color */
  color: var(--bi-color-text-black);
  /* behavior */
  cursor: pointer;
}
/* Required — asterisk after label */
.bi-radio--required .bi-radio__label::after {
  /* content */
  content: '*';
  /* color */
  color: var(--bi-color-brand-primary);
}
/* Error state */
.bi-radio--error .bi-radio__input {
  background-color: var(--bi-color-functional-error-light);
  border: 1px solid var(--bi-color-functional-error);

  &::after {
    background-color: var(--bi-color-functional-error);
  }
}
.bi-radio--error .bi-radio__label {
  color: var(--bi-color-functional-error);
}
/* Disabled state */
.bi-radio--disabled .bi-radio__input {
  background-color: var(--bi-color-container-grey);
  border: 1px solid var(--bi-color-base-grey-400);
  cursor: not-allowed;

  &::after {
    transform: translate(-50%, -50%) scale(0);
  }
}
.bi-radio--disabled .bi-radio__label {
  color: var(--bi-color-brand-grey-mid);
  cursor: not-allowed;
}
/* Dark (secondary) background */
.bi-container-secondary .bi-radio__label {
  color: var(--bi-color-container-white);
}
.bi-container-secondary .bi-radio--error .bi-radio__label {
  color: var(--bi-color-functional-error);
}
/* SearchAutocomplete chip — shared visual atom used inside the navbar search
   input and the SearchSection's query input. The host components own the
   *container* layout (drawer band, fixed overlay, in-flow card); this file
   only owns the chip's appearance + interaction states so both sites stay
   in sync. */
.bi-search-autocomplete__item {
  /* layout — `inline-block` (not `inline-flex`) so whitespace between the
     bold prefix span and the trailing text node survives. Anonymous flex
     items strip leading whitespace and "IDW Akademie" would render as
     "IDWAkademie". */
  display: inline-block;
  /* dimensions */
  max-width: 100%;
  width: fit-content;
  min-height: 28px;
  /* spacing */
  padding: 4px 16px;
  /* border */
  border-radius: var(--bi-radius-full);
  /* color */
  background-color: var(--bi-color-brand-tertiary);
  color: var(--bi-color-text-secondary);
  /* typography — chip body is regular weight; only the matched prefix is bold */
  font-weight: var(--bi-font-weight-regular);
  /* behavior */
  cursor: pointer;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;

  /* Suppress global ul > li::before dot from core.css */
  &::before {
    content: none;
  }
}
.bi-search-autocomplete__item--active,
.bi-search-autocomplete__item:hover {
  background-color: var(--bi-color-button-secondary-hover);
  color: var(--bi-color-text-white);
}
/* The matched prefix is rendered inside this span — visually emphasised
   with bold weight while the rest of the suggestion stays regular. */
.bi-search-autocomplete__prefix {
  font-weight: var(--bi-font-weight-bold);
}
/* ListItemAdvanced – grid layout with marker, link, optional date and text */
.bi-list-item--advanced {
  /* layout */
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 9px;
  align-items: baseline;
  list-style: none;
  /* spacing */
  padding: 8px;
  margin: 0;
  /* dimensions */
  min-height: 64px;

  /* All direct children go to column 2; ::before auto-places in column 1 */
  & > * {
    grid-column: 2;
  }

  &.bi-list-item--link-only {
    min-height: unset;
  }

  /* Link — bare <a> */
  & a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bi-color-text-black);

    &:hover {
      color: var(--bi-color-link-primary);
    }

    &:active {
      color: var(--bi-color-link-primary-active);
    }

    &:visited {
      color: var(--bi-color-link-primary-visited);
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: 2px solid var(--bi-color-focus);
      outline-offset: 2px;
    }
  }

  /* Date label — bare <span>, absorbs bi-label typography */
  & span {
    display: block;
    font-family: var(--bi-font-family-primary);
    font-weight: var(--bi-font-weight-bold);
    font-size: var(--bi-font-label-s);
    line-height: var(--bi-line-height-mini);
    color: var(--bi-color-brand-grey-mid);
    text-transform: capitalize;
  }

  /* Description — bare <p> */
  & p {
    margin: 0;
    color: var(--bi-color-text-black);
  }
}
/* Reset global ul > li::before and set consistent marker column */
.bi-list-item--advanced::before {
  /* Reset global hanging-indent absolute positioning so marker auto-places in grid column 1 */
  position: static;
  left: auto;
  top: auto;
  transform: none;
  /* Reset visual styling */
  background: none;
  border-radius: 0;
  width: 27px;
  height: auto;
  margin: 0;
  color: var(--bi-color-text-black);
  text-align: right;
}
.bi-list-item--unordered::before {
  content: '•';
}
.bi-list-item--ordered::before {
  content: counter(list-item) '.';
}
/* Responsive */
@media (min-width: 1200px) {
  .bi-list-item--advanced {
    padding: 16px;
    min-height: 105px;

    &.bi-list-item--link-only {
      min-height: unset;
    }

    & span {
      margin-top: 5px;
    }
  }

  .bi-list-item--unordered::before {
    font-size: 22px;
  }
}
/* DownloadListItem – download row with link and optional file-type button */
/* Suppress global ul > li::before dot */
.bi-list-item--download::before {
  content: none;
}
/* Block — grid layout: link + file btn on row 1, description spans full width on row 2 */
.bi-list-item--download {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 6px;
  list-style: none;
  min-height: 32px;
  padding: 0;
  margin: 0;
  color: var(--bi-color-text-black);
  border-radius: 4px;
}
/* Description stays in the link column (column 1), not spanning under the file btn */
.bi-list-item--download > p {
  grid-column: 1;
}
/* Accordion variant still uses div wrapper */
.bi-list-item--download-accordion .bi-accordion-item__description > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 4px;
}
/* Description — bare p */
.bi-list-item--download p,
.bi-list-item--download-accordion p {
  margin: 0;
}
/* Content link — absorbs bi-link typography + underline */
:is(.bi-list-item--download, .bi-list-item--download-accordion) .bi-list-item__link {
  display: inline;
  font-family: var(--bi-font-family-primary);
  font-weight: var(--bi-font-weight-regular);
  font-size: var(--bi-font-copy-m);
  line-height: var(--bi-line-height-mini);
  color: var(--bi-color-link-primary);
  text-decoration: underline;
  text-decoration-color: var(--bi-color-link-primary);

  &:hover {
    color: var(--bi-color-link-primary-hover);
    text-decoration-color: var(--bi-color-link-primary-hover);
  }

  &:active {
    color: var(--bi-color-link-primary-active);
    text-decoration-color: var(--bi-color-link-primary-active);
  }

  &:visited {
    color: var(--bi-color-link-primary-visited);
    text-decoration-color: var(--bi-color-link-primary-visited);
  }

  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--bi-color-focus);
    outline-offset: 2px;
  }
}
/* File-type download button */
:is(.bi-list-item--download, .bi-list-item--download-accordion) .bi-list-item__file-btn {
  display: inline-flex;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 4px;
  min-height: 24px;
  min-width: 24px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--bi-font-family-primary);
  font-weight: var(--bi-font-weight-regular);
  font-size: var(--bi-font-copy-m);
  line-height: var(--bi-line-height-default);
  color: var(--bi-color-text-black);

  & .bi-custom-icon::before {
    color: var(--bi-color-icon-primary);
  }

  &:hover {
    color: var(--bi-color-link-primary-hover);

    & .bi-custom-icon::before {
      color: var(--bi-color-link-primary-hover);
    }
  }

  &:active {
    color: var(--bi-color-link-primary-active);

    & .bi-custom-icon::before {
      color: var(--bi-color-link-primary-active);
    }
  }

  &:visited {
    color: var(--bi-color-text-black);

    & .bi-custom-icon::before {
      color: var(--bi-color-text-black);
    }
  }

  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--bi-color-focus);
    outline-offset: 2px;
  }
}
/* Modifier: basic */
.bi-list-item--download-basic {
  padding: 20px;
}
/* Modifier: extended */
.bi-list-item--download-extended {
  padding: 20px;
}
/* Modifier: accordion */
.bi-list-item--download-accordion {
  margin: 0;
  border-radius: 0;

  & .bi-accordion-item__trigger {
    position: relative;
    padding: 20px;
    border-bottom: none;
    color: var(--bi-color-text-black);

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 20px;
      right: 20px;
      border-bottom: var(--bi-border-width) solid var(--bi-color-border-secondary);
    }
  }

  & .bi-accordion-item__trigger-text {
    font-family: var(--bi-font-family-primary);
    font-weight: var(--bi-font-weight-semibold);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: normal;
    color: var(--bi-color-text-black);
  }

  & .bi-accordion-item__trigger-icon {
    font-size: 27px;
    filter: none;
    color: var(--bi-color-text-secondary);
  }

  & .bi-accordion-item__content-inner {
    gap: 4px;
    padding: 0 20px;
  }

  &.bi-accordion-item--open .bi-accordion-item__content-inner {
    padding: 0 20px 24px;
  }

  & .bi-accordion-item__description {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 20px 0;
  }
}
/* Group hover */
:is(.bi-list-item--download, .bi-list-item--download-accordion):has(.bi-list-item__link:hover) .bi-list-item__file-btn {
  color: var(--bi-color-link-primary-hover);

  & .bi-custom-icon::before {
    color: var(--bi-color-link-primary-hover);
  }
}
:is(.bi-list-item--download, .bi-list-item--download-accordion):has(.bi-list-item__file-btn:hover) .bi-list-item__link {
  color: var(--bi-color-link-primary-hover);
  text-decoration-color: var(--bi-color-link-primary-hover);
}
/* Responsive */
@media (min-width: 1200px) {
  .bi-list-item--download-basic {
    padding: 16px;
  }

  .bi-list-item--download-extended {
    padding: 16px;
  }

  .bi-list-item--download-accordion {
    padding: 0;

    & .bi-accordion-item__trigger {
      padding: 16px;

      &::after {
        left: 16px;
        right: 16px;
      }
    }

    & .bi-accordion-item__trigger-icon {
      font-size: 22px;
    }

    &.bi-accordion-item--open .bi-accordion-item__content-inner {
      padding: 0 16px 16px;
    }
  }
}
/* QuoteBlock Component Styles */
.bi-quote-content {
  /* layout */
  display: flex;
  flex-direction: column;
  /* spacing */
  gap: 4px;
  padding: 0;

  .bi-quote-text__content {
    /* spacing */
    margin-bottom: 24px;
    word-break: break-word;
    hyphens: auto;
  }

  .bi-quote-text {
    /* spacing */
    margin: 0;
    /* typography */
    font-style: italic;
    font-weight: var(--bi-font-weight-regular);
    font-size: var(--bi-font-copy-l);
    line-height: 140%;
    /* color */
    color: var(--bi-color-text-secondary);
    word-break: break-word;
    hyphens: auto;
  }

  .bi-quote-text__author {
    /* layout */
    display: block;
    /* typography */
    font-style: normal;
    font-weight: var(--bi-font-weight-reqular);
    font-size: var(--bi-font-copy-m);
    line-height: 120%;
    word-break: break-word;
    hyphens: auto;
  }
}
/* Responsive adjustments */
@media (min-width: 1200px) {
  .bi-quote-content {
    /* layout */
    flex-direction: row;
    align-items: flex-start;
    /* spacing */
    gap: 16px;
    padding: 0;

    .bi-quote-text {
      /* layout */
      flex: 1;
      /* typography */
      font-size: var(--bi-font-copy-xl);
    }
  }
}
.bi-social-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bi-color-base-white);
  background-color: transparent;
  text-decoration: none;

  &:hover {
    color: var(--bi-color-button-tertiary);
  }

  &:active {
    color: var(--bi-color-button-tertiary);
  }

  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--bi-color-focus);
    outline-offset: 2px;
  }

  .bi-social-link__icon {
    font-size: 25px;
    display: block;
  }
}
/* Tab component - Individual tab item */
.bi-tab {
  position: relative;
  z-index: var(--bi-z-index-tab-item);
  /* Layout */
  display: inline-block;
  /* Typography */
  font-style: normal;
  font-weight: var(--bi-font-weight-regular);
  font-size: var(--bi-font-size-md);
  line-height: var(--bi-line-height-tight);
  text-decoration: none;
  /* Colors */
  color: var(--bi-color-text-secondary);
  /* Spacing */
  padding: 12px 16px;
  width: fit-content;
  /* Button reset */
  border: none;
  cursor: pointer;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
  }

  &:hover {
    color: var(--bi-color-text-secondary);
  }

  /* Accessible focus without red highlight */
  &:focus {
    outline: none;
  }
  &:focus-visible {
    outline: 2px solid var(--bi-color-focus);
    outline-offset: -2px;
  }

  /* Active state - dark text with underline */
  &.bi-tab--active {
    font-weight: var(--bi-font-weight-semibold);

    &::after {
      height: 2px;
      background-color: var(--bi-color-border-secondary);
    }
  }

  /* Active state hover */
  &.bi-tab--active:hover {
    color: var(--bi-color-text-secondary);
  }
}
/* White text when on blue background */
.bi-container-secondary .bi-tab {
  color: var(--bi-color-text-white);

  &::after {
    background-color: var(--bi-color-text-white);
    opacity: 0.5;
  }

  &:hover {
    color: var(--bi-color-text-white);
  }
}
.bi-container-secondary .bi-tab--active {
  color: var(--bi-color-text-white);

  &::after {
    background-color: var(--bi-color-text-white);
    opacity: 1;
  }

  &:hover {
    color: var(--bi-color-text-white);
  }
}
.bi-container-secondary
  .bi-tab-items__button-wrapper
  .bi-button.bi-button--secondary {
  color: var(--bi-color-text-white);

  &:hover,
  &:active {
    color: var(--bi-color-text-white);
    border-color: var(--bi-color-text-white);
  }

  .bi-button.bi-button--secondary {
    color: var(--bi-color-text-white);
  }
}
@media (min-width: 1200px) {
  .bi-tab {
    padding: 8px 24px 8px;
    width: fit-content;
    /* Typography */
    font-size: var(--bi-font-headline-l);
    line-height: 120%;
    letter-spacing: 0.05em;

    &::after {
      display: none;
    }

    &.bi-tab--active {
      &::after {
        display: block;
        left: 0;
        right: 0;
        height: 2px;
        background-color: var(--bi-color-border-secondary);
      }
    }
  }

  .bi-container-secondary .bi-tab {
    &::after {
      display: none;
    }
  }

  .bi-container-secondary .bi-tab--active {
    &::after {
      display: block;
      left: 0;
      right: 0;
      height: 2px;
      background-color: var(--bi-color-text-white);
    }
  }
}
/* Text Component Styles */
.bi-text {
  /* layout */
  display: block;
  /* spacing */
  margin: 0;
  padding: 8px 0 24px;
  /* dimensions */
  max-width: 342px;
  /* typography */
  font-weight: var(--bi-font-weight-regular);
  /* color */
  color: var(--bi-color-text-dark-grey);
}
/* Text size modifiers */
.bi-text--s {
  /* typography */
  font-size: var(--bi-font-copy-s);
  line-height: var(--bi-line-height-tight);
}
.bi-text--m {
  /* typography */
  font-size: var(--bi-font-copy-m);
  line-height: var(--bi-line-height-tight);
}
.bi-text--l {
  /* typography */
  font-size: var(--bi-font-copy-l);
  line-height: var(--bi-line-height-normal);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
/* Responsive adjustments */
@media (min-width: 1200px) {
  .bi-text {
    /* dimensions */
    max-width: 752px;
  }

  .bi-text--l {
    /* typography */
    font-size: var(--bi-font-copy-xl);
    text-shadow: none;
  }
}
/* Toggle component - Accessible switch control */
/* Toggle wrapper */
.bi-toggle {
  /* layout */
  display: flex;
  align-items: center;
  /* spacing */
  gap: 8px;
}
/* Native input — visually replaced by custom track + knob */
.bi-toggle__input {
  /* behavior */
  appearance: none;
  -webkit-appearance: none;
  /* layout */
  flex-shrink: 0;
  /* dimensions */
  width: 44px;
  height: 24px;
  /* spacing */
  margin: 0;
  padding: 2px;
  /* border */
  border: 1px solid transparent;
  border-radius: 12px;
  /* color */
  background-color: var(--bi-color-brand-tertiary);
  /* behavior */
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  transition: var(--transition-base);

  /* Knob */
  &::after {
    /* content */
    content: '';
    /* position */
    position: absolute;
    top: 1px;
    left: 2px;
    /* dimensions */
    width: 20px;
    height: 20px;
    /* border */
    border-radius: 50%;
    /* color */
    background-color: var(--bi-color-brand-secondary);
    /* behavior */
    transition: transform var(--transition-base);
  }

  /* Checked — knob slides right */
  &:checked::after {
    /* position */
    transform: translateX(18px);
  }

  /* Hover state — border appears */
  &:hover {
    /* border */
    border-color: var(--bi-color-brand-secondary);
  }

  /* Focus state — visible focus ring for keyboard users */
  &:focus-visible {
    /* border */
    border-color: var(--bi-color-brand-secondary);
    /* outline */
    outline: none;
  }
}
/* Label */
.bi-toggle__label {
  /* typography */
  font-size: var(--bi-font-copy-s);
  line-height: var(--bi-line-height-tight);
  /* color */
  color: var(--bi-color-text-black);
  /* behavior */
  cursor: pointer;
}
/* Required — asterisk after label */
.bi-toggle--required .bi-toggle__label::after {
  /* content */
  content: '*';
  /* color */
  color: var(--bi-color-brand-primary);
}
/* Disabled state */
.bi-toggle--disabled .bi-toggle__input {
  /* color */
  background-color: var(--bi-color-container-grey);
  /* behavior */
  cursor: not-allowed;

  &::after {
    /* color */
    background-color: var(--bi-color-base-grey-400);
  }

  &:hover {
    /* border */
    border-color: transparent;
  }
}
.bi-toggle--disabled .bi-toggle__label {
  /* color */
  color: var(--bi-color-brand-grey-mid);
  /* behavior */
  cursor: not-allowed;
}
.bi-title {
  position: relative;
}
.bi-title__heading {
  margin: 0;
  font-style: normal;
  font-weight: var(--bi-font-weight-semibold);
  line-height: var(--bi-line-height-tight);
  color: var(--bi-color-text-secondary);
}
/* XL – Source Sans Pro, 16px mobile → 40px desktop, generous section spacing */
.bi-title--xl {
  padding-top: 40px;
  padding-left: 24px;
}
.bi-title--xl .bi-title__heading {
  font-family: var(--bi-font-family-primary);
  font-size: var(--bi-font-size-sm);
  letter-spacing: var(--bi-letter-spacing-medium);
}
/* L – Source Sans Pro, 20px mobile → 24px desktop */
.bi-title--l {
  padding-top: 8px;
  padding-bottom: 18px;
}
.bi-title--l .bi-title__heading {
  font-family: var(--bi-font-family-primary);
  font-size: var(--bi-font-size-lg);
  letter-spacing: var(--bi-letter-spacing-medium);
}
/* M – Poppins (headline font), 20px at all breakpoints */
.bi-title--m {
  padding-top: 8px;
  padding-bottom: 18px;
}
.bi-title--m .bi-title__heading {
  font-family: var(--bi-font-family-headline);
  font-size: var(--bi-font-size-lg);
  letter-spacing: var(--bi-letter-spacing-normal);
}
@media (min-width: 1200px) {
  .bi-title--xl .bi-title__heading {
    font-family: var(--bi-font-family-headline);
    font-size: var(--bi-font-size-xxl);
  }

  .bi-title--l .bi-title__heading {
    font-size: var(--bi-font-size-xxl-mobile);
  }
}
/* MOLECULES */
/* Accordion Molecule Styles */
.bi-accordion {
  display: block;
  width: 100%;
  background-color: var(--bi-color-container-white);
  padding: 16px 0;
}
/* Contextual background – contrast with parent section */
.bi-container-white .bi-accordion,
.bi-container-grey .bi-accordion {
  background-color: var(--bi-color-surface);
}
/* Grey Background */
.bi-accordion.bi-container-very-light-grey {
  background-color: var(--bi-color-container-grey);
}
/* Dark Blue Container */
.bi-accordion.bi-container-secondary {
  background-color: var(--bi-color-container-secondary);
}
.bi-accordion.bi-container-secondary .bi-accordion-item__trigger {
  border-bottom-color: var(--bi-color-text-light-grey);
  color: inherit;
}
.bi-accordion.bi-container-secondary .bi-accordion-item__trigger-icon {
  color: inherit;
}
.bi-accordion.bi-container-secondary .bi-accordion-item__description {
  color: inherit;
}
/* Accordion itself becomes white-text when it has the secondary variant */
.bi-accordion.bi-container-secondary {
  color: var(--bi-color-text-white);
}
/* Light Blue (Secondary Light) Container */
.bi-accordion.bi-container-secondary-light {
  background-color: var(--bi-color-container-blue);
}
.bi-accordion.bi-container-secondary-light .bi-accordion-item__trigger {
  color: var(--bi-color-text-secondary-final);
  border-bottom-color: var(--bi-color-text-secondary-final);
}
.bi-accordion.bi-container-secondary-light .bi-accordion-item__trigger-icon {
  color: var(--bi-color-text-secondary-final);
}
.bi-accordion.bi-container-secondary-light .bi-accordion-item__description {
  color: var(--bi-color-text-secondary-final);
}
/* DropdownAccordion molecule */
/* Wrapper */
.bi-dropdown-accordion-wrapper {
  /* layout */
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* dimensions */
  width: 100%;
}
/* Required indicator */
.bi-dropdown-accordion-wrapper--required .bi-dropdown-accordion__label::after {
  /* content */
  content: '*';
  /* color */
  color: var(--bi-color-brand-primary);
}
/* Label */
.bi-dropdown-accordion__label {
  /* typography */
  font-size: var(--bi-font-copy-s);
  line-height: var(--bi-line-height-tight);
  /* color */
  color: var(--bi-color-text-dark-grey);
}
/* Root — position anchor for panel */
.bi-dropdown-accordion {
  /* position */
  position: relative;
  /* dimensions */
  width: 100%;
}
/* Trigger button */
.bi-dropdown-accordion__trigger {
  /* layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* dimensions */
  width: 100%;
  height: 48px;
  /* spacing */
  padding: 12px;
  /* border */
  border: 1px solid transparent;
  border-radius: var(--bi-radius-none);
  /* typography */
  font-size: var(--bi-font-copy-s);
  font-family: inherit;
  line-height: var(--bi-line-height-tight);
  text-align: left;
  /* color */
  background-color: var(--bi-color-container-white);
  color: var(--bi-color-text-dark-grey);
  /* behavior */
  box-sizing: border-box;
  cursor: pointer;
  transition: var(--transition-base);

  &:hover,
  &:focus {
    border-color: var(--bi-color-brand-secondary);
  }

  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--bi-color-focus);
    outline-offset: 2px;
  }

  .bi-dropdown-accordion--open & {
    border-color: var(--bi-color-brand-secondary);
  }

  &:disabled,
  .bi-dropdown-accordion--disabled & {
    /* color */
    background-color: var(--bi-color-container-grey);
    /* border */
    border-color: transparent;
    /* behavior */
    opacity: 0.5;
    cursor: not-allowed;
  }
}
/* Trigger value */
.bi-dropdown-accordion__value {
  /* layout */
  flex: 1;
  min-width: 0;
  /* overflow */
  overflow: hidden;
  /* typography */
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Placeholder value */
.bi-dropdown-accordion__value--placeholder {
  /* color */
  color: var(--bi-color-text-dark-grey);
}
/* Chevron icon — rotates when open */
.bi-dropdown-accordion__icon {
  /* layout */
  flex-shrink: 0;
  /* dimensions */
  width: 24px;
  height: 24px;
  /* typography */
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  /* color */
  color: var(--bi-color-brand-secondary);
  /* behavior */
  -webkit-text-stroke: 0.8px var(--bi-color-brand-secondary);
  transition: transform var(--transition-base);

  .bi-dropdown-accordion--open & {
    transform: rotate(180deg);
  }
}
/* Panel — floats over page content */
.bi-dropdown-accordion__panel {
  /* position */
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  /* dimensions */
  width: 100%;
  max-height: 0;
  /* overflow */
  overflow: hidden;
  /* behavior */
  visibility: hidden;
  pointer-events: none;

  .bi-dropdown-accordion--open & {
    /* dimensions */
    max-height: none;
    /* overflow */
    overflow: visible;
    /* behavior */
    visibility: visible;
    pointer-events: auto;
  }
}
/* Panel inner container */
.bi-dropdown-accordion__panel-inner {
  /* border */
  border: 1px solid var(--bi-color-brand-tertiary);
  border-left-width: 2px;
  border-right-width: 2px;
  /* color — opaque background prevents page content bleeding through during accordion expand animation */
  background-color: var(--bi-color-container-white);
  /* overflow */
  overflow: hidden;
}
/* ========================================
   Accordion overrides inside panel
   ======================================== */
/* Strip default accordion container chrome */
.bi-dropdown-accordion__accordion.bi-accordion {
  /* dimensions */
  width: 100%;
  /* spacing */
  padding: 0;
  /* color */
  background-color: transparent;
}
/* Group item — no outer margin or padding */
.bi-dropdown-accordion__accordion .bi-accordion-item {
  /* spacing */
  margin: 0;
  padding: 0;
}
/* Group trigger — dark navy background, white text */
.bi-dropdown-accordion__accordion .bi-accordion-item__trigger {
  /* dimensions */
  height: 48px;
  /* spacing */
  padding: 12px 16px;
  /* border */
  border-bottom: none;
  /* typography */
  font-size: var(--bi-font-copy-s);
  font-weight: var(--bi-font-weight-regular);
  letter-spacing: 0;
  /* color */
  background-color: var(--bi-color-brand-secondary);
  color: var(--bi-color-text-white);
  /* behavior */
  transition: var(--transition-base);

  &:hover {
    background-color: var(--bi-color-brand-secondary-hover);
  }

  &:focus-visible {
    outline: 2px solid var(--bi-color-focus);
    outline-offset: -2px;
  }
}
/* Group trigger text */
.bi-dropdown-accordion__accordion .bi-accordion-item__trigger-text {
  /* typography */
  font-size: var(--bi-font-copy-s);
  font-weight: var(--bi-font-weight-regular);
  letter-spacing: 0;
  line-height: var(--bi-line-height-tight);
}
/* Group trigger icon — white */
.bi-dropdown-accordion__accordion .bi-accordion-item__trigger-icon {
  /* typography */
  font-size: 14px;
  /* color */
  color: var(--bi-color-text-white);
  /* behavior */
  -webkit-text-stroke: 0.8px var(--bi-color-text-white);
  filter: none;
}
/* Open state — keep navy */
.bi-dropdown-accordion__accordion .bi-accordion-item--open .bi-accordion-item__trigger {
  /* color */
  background-color: var(--bi-color-brand-secondary);

  &:hover {
    background-color: var(--bi-color-brand-secondary-hover);
  }
}
/* Content area — no extra padding from base styles */
.bi-dropdown-accordion__accordion .bi-accordion-item__description {
  /* spacing */
  padding: 0;
}
/* Options list */
.bi-dropdown-accordion__options {
  /* list */
  list-style: none;
  /* spacing */
  margin: 0;
  padding: 0;

  & > li:not(:last-child) {
    margin-bottom: 0;
  }

  & > li::before {
    display: none;
  }
}
/* Option button */
.bi-dropdown-accordion__option {
  /* layout */
  display: block;
  /* dimensions */
  width: 100%;
  min-height: 48px;
  /* spacing */
  padding: 12px;
  /* border */
  border: none;
  /* typography */
  font-size: var(--bi-font-copy-s);
  font-family: inherit;
  line-height: var(--bi-line-height-tight);
  text-align: left;
  /* color */
  background-color: var(--bi-color-container-white);
  color: var(--bi-color-text-dark-grey);
  /* behavior */
  box-sizing: border-box;
  cursor: pointer;
  transition: var(--transition-base);

  &:hover,
  &:focus {
    /* color */
    background-color: var(--bi-color-base-grey-050);
    color: var(--bi-color-text-black);
    /* elevation */
    box-shadow:
      inset 1px 0 0 var(--bi-color-brand-secondary),
      inset -1px 0 0 var(--bi-color-brand-secondary),
      inset 0 -1px 0 var(--bi-color-brand-secondary);
  }

  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--bi-color-focus);
    outline-offset: -2px;
  }

  &[aria-selected='true'] {
    /* color */
    background-color: var(--bi-color-base-grey-050);
    /* typography */
    font-weight: var(--bi-font-weight-semibold);
  }
}
/* ========================================
   Container-adaptive backgrounds
   ======================================== */
/* Follow --bi-color-surface pattern */
.bi-container-white .bi-dropdown-accordion__trigger,
.bi-container-grey .bi-dropdown-accordion__trigger {
  background-color: var(--bi-color-surface);
}
.bi-container-white .bi-dropdown-accordion--open .bi-dropdown-accordion__trigger,
.bi-container-grey .bi-dropdown-accordion--open .bi-dropdown-accordion__trigger {
  background-color: var(--bi-color-base-grey-050);
}
/* Dark (secondary) background — white text, white border */
.bi-container-secondary .bi-dropdown-accordion__label {
  color: var(--bi-color-container-white);
}
.bi-container-secondary .bi-dropdown-accordion__trigger {
  border-color: var(--bi-color-container-white);
}
.bi-container-secondary .bi-dropdown-accordion--open .bi-dropdown-accordion__trigger {
  background-color: var(--bi-color-container-white);
  border-color: var(--bi-color-container-white);
}
.bi-container-grey .bi-dropdown-accordion__option {
  background-color: var(--bi-color-surface);
}
.bi-container-grey .bi-dropdown-accordion__option:hover,
.bi-container-grey .bi-dropdown-accordion__option[aria-selected='true'] {
  background-color: var(--bi-color-base-grey-050);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bi-dropdown-accordion__icon,
  .bi-dropdown-accordion__panel,
  .bi-dropdown-accordion__accordion .bi-accordion-item__trigger-icon {
    transition: none;
  }
}
/* Base bi-content-slider styles – shared by all components using content-slider pattern */
:root {
  --bi-container-width: 100vw;
  --bi-content-width: 1120px;
}
.bi-content-slider {
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* dimensions */
  width: 100%;
  /* spacing */
  padding: 0;

  /* Modifier: no title */
  &.bi-content-slider--no-title {
    /* spacing */
    .bi-content-slider__viewport {
      padding-top: 0;
    }
  }

  /* Section title — horizontal alignment comes from the bi-text-* utility class on <h2> */
  h2 {
    /* dimensions */
    width: 100%;
  }


  /* Mobile slider viewport */
  .bi-content-slider__viewport {
    /* dimensions */
    width: 100%;
    /* spacing */
    padding: 24px 0;
    /* overflow */
    overflow: hidden;

    .bi-content-slider--no-title {
      /* spacing */
      padding-top: 0;
    }
  }

  /* Track uses column flow so each slide is full width */
  .bi-content-slider__track {
    /* layout */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    justify-items: stretch;
    /* transition */
    transition: transform 300ms ease;
  }

  .bi-content-slider__slide {
    /* dimensions */
    width: 100%;
    padding: 0;
    /* allow TeaserCard badge to extend outside without being clipped */
    overflow: visible;
  }

  /* Center single card when only one is present (mobile) */
  .bi-content-slider__track--single {
    /* layout */
    justify-content: center;
  }

  .bi-content-slider__track--single .bi-content-slider__slide {
    /* dimensions */
    max-width: 352px;
  }

  /* Footer container */
  .bi-content-slider__footer {
    /* layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* dimensions */
    width: 100%;
  }

  /* Pagination container */
  .bi-content-slider__pagination {
    /* layout */
    display: flex;
    align-items: center;
    justify-content: center;
    /* dimensions */
    width: 100%;
  }

  /* Button wrapper */
  .bi-content-slider__button-wrapper {
    /* layout */
    display: flex;
    justify-content: center;
    /* dimensions */
    width: 100%;
    /* spacing — top padding separates button from cards (only rendered when button exists) */
    padding: 24px 0 0;

    .bi-button.bi-button--primary {
      /* typography */
      line-height: 16px;
      letter-spacing: 0.1px;
    }
  }
}
/* Title color override for blue background */
.bi-container-secondary .bi-content-slider > h2 {
  /* color */
  color: var(--bi-color-text-white);
}
/* Inside a section: zero out the slider's own outer padding — section provides it */
.bi-section-base .bi-content-slider,
.bi-section-base .bi-content-slider.bi-section-card-slider--with-button {
  padding-top: 0;
  padding-bottom: 0;
}
/* Mobile keeps the viewport's small 24px bottom buffer — section's 40px alone is too tight */
/* Responsive adjustments - base and component-specific styles */
@media (min-width: 1200px) {
  /* SectionBase already applies horizontal padding; avoid doubling on slides */
  .bi-section-base .bi-content-slider .bi-content-slider__slide {
    padding: 0;
  }

  /* Inside a section: section provides its own padding — zero out slider's outer padding (all modifiers) */
  .bi-section-base .bi-content-slider,
  .bi-section-base .bi-content-slider.bi-section-card-slider--with-button {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Viewport: only zero out padding-bottom — preserve top to space title from cards */
  .bi-section-base .bi-content-slider .bi-content-slider__viewport,
  .bi-section-base .bi-content-slider.bi-section-card-slider--with-button .bi-content-slider__viewport {
    padding-bottom: 0;
  }

  .bi-content-slider {
    /* spacing */
    padding-top: 80px;
    padding-bottom: 0;

    &.bi-content-slider--no-title {
      /* spacing */
      padding-top: 40px;

      .bi-content-slider__viewport {
        padding-top: 0;
      }
    }

    /* Modifier: with button - increase outer padding-bottom */
    &.bi-section-card-slider--with-button {
      /* spacing */
      padding-bottom: 100px;
    }

    /* Override font size for TeaserCardIcon titles inside slides */
    .bi-teaser-icon__title {
      font-size: 20px;
    }

    /* Desktop: no slider; present as grid */
    .bi-content-slider__viewport {
      /* spacing */
      padding-top: 80px;
      padding-bottom: 100px;
      /* overflow */
      overflow: visible;
      /* scroll */
      scroll-snap-type: none;
    }

    /* When button is present: button-wrapper provides the cards-to-button gap (avoid double padding) */
    &.bi-section-card-slider--with-button .bi-content-slider__viewport {
      /* spacing */
      padding-bottom: 0;
    }

    .bi-content-slider__track {
      /* layout */
      display: grid;
      grid-auto-flow: row;
      grid-auto-columns: unset;
      grid-template-columns: repeat(3, minmax(0, 352px));
      justify-content: center;
      justify-items: center;
      /* spacing */
      gap: 32px;
    }

    &.bi-content-slider--columns-2 .bi-content-slider__track {
      grid-template-columns: repeat(2, minmax(0, 544px));
    }

    &.bi-content-slider--columns-4 .bi-content-slider__track {
      grid-template-columns: repeat(4, minmax(0, 352px));
    }

    /* Center single card when only one is present */
    .bi-content-slider__track--single {
      /* layout */
      grid-template-columns: 352px;
    }

    /* Full width override - affects both single and multi-card tracks */
    .bi-content-slider__track--full-width,
    .bi-content-slider__track--single.bi-content-slider__track--full-width .bi-content-slider__slide {
      grid-template-columns: 1fr;
      max-width: 100%;
    }

    .bi-content-slider__slide {
      /* spacing */
      padding: 0;
      /* scroll */
      scroll-snap-align: none;
    }

    /* Footer container - desktop grid layout */
    .bi-content-slider__footer {
      /* layout */
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      /* dimensions */
      width: 100%;
      /* spacing */
      margin: 0 auto;
    }

    /* Pagination centered in grid — hidden on desktop (no slider) */
    .bi-content-slider__pagination {
      /* layout */
      display: none;
      grid-column: 2;
    }

    /* Button centered (pagination hidden on desktop) */
    .bi-content-slider__button-wrapper {
      /* layout */
      grid-column: 1 / -1;
      justify-self: center;
      /* dimensions */
      max-width: var(--bi-content-width);
      /* spacing — top padding separates button from cards (only present when button exists) */
      padding: 40px 0 0;
    }

    /* Title - Desktop */
    h2 {
      /* dimensions */
      max-width: var(--bi-content-width);
      /* spacing */
      padding: 0;
      margin: 0 auto;
    }

  }
}
/* ContentSliderOverflowBase styles - independent from ContentSliderBase */
.bi-content-slider-overflow {
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* dimensions */
  width: 100%;
  /* spacing */
  padding-bottom: 0;

  /* Modifier: no title */
  &.bi-content-slider-overflow--no-title {
    /* spacing */
    padding-top: 40px;
  }

  /* Section title — alignment comes from the bi-text-* utility class on <h2>.
     `width: 100%` is required because the slider root is a flex column with `align-items: center`, which would
     otherwise shrink the h2 to its content width and make `text-align: left/right` visually indistinguishable
     from centered. */
  h2 {
    /* dimensions */
    width: 100%;
  }

  /* Mobile slider viewport */
  .bi-content-slider-overflow__viewport {
    /* dimensions */
    width: 100%;
    /* spacing */
    padding: 32px 0 30.08px;
    /* overflow */
    overflow: hidden;

    .bi-content-slider-overflow--no-title & {
      /* spacing */
      padding-top: 0;
    }
  }

  /* Track uses column flow so each slide is full width */
  .bi-content-slider-overflow__track {
    /* layout */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    justify-items: stretch;
    /* transition */
    transition: transform 300ms ease;
  }

  /* Individual slide */
  .bi-content-slider-overflow__slide {
    /* dimensions */
    width: 100%;
    /* spacing */
    padding: 0;
  }

  /* Remove button margin-top inside teaser cards within the slider */
  .bi-card--teaser-card-icon .bi-button {
    margin-top: 0;
  }

  /* Footer container */
  .bi-content-slider-overflow__footer {
    /* layout */
    display: flex;
    flex-direction: column;
  }

  /* Button wrapper */
  .bi-content-slider-overflow__button-wrapper {
    /* layout */
    display: flex;
    justify-content: center;
    /* dimensions */
    width: 100%;
    /* spacing */
    padding: 32px 0 0;

    .bi-button.bi-button--secondary {
      /* spacing */
      padding: 0;
    }
  }

  /* Mobile pagination container */
  .bi-content-slider-overflow__pagination-mobile {
    .bi-button {
      /* Override icon-only button dimensions to match icon size */
      &.bi-button--icon-only {
        /* dimensions */
        width: 15.73px;
        height: 29.64px;
        /* spacing */
        padding: 0;
      }

      .bi-button__icon .bi-custom-icon {
        font-size: 30px;
      }
    }
  }

  /* Desktop pagination container */
  .bi-content-slider-overflow__pagination-desktop {
    /* layout */
    display: none; /* Hide desktop pagination on mobile by default */

    .bi-button {
      /* Override icon-only button dimensions to match icon size */
      &.bi-button--icon-only {
        /* dimensions */
        width: 26px;
        height: 49px;
        /* spacing */
        padding: 0;
      }

      .bi-button__icon .bi-custom-icon {
        font-size: 49px;
      }
    }
  }
}
/* Title color override for secondary container background */
.bi-container-secondary .bi-content-slider-overflow > h2 {
  /* color */
  color: var(--bi-color-text-white);
}
/* Desktop layout (>=1200px) */
@media (min-width: 1200px) {
  .bi-content-slider-overflow {
    /* spacing */

    &.bi-content-slider-overflow--no-title {
      .bi-content-slider-overflow__viewport {
        /* spacing */
        padding-top: 0;
      }
    }

    /* Section title - desktop */
    h2 {
      /* dimensions */
      max-width: var(--bi-content-width);
      /* spacing */
      padding: 0;
      margin: 0 auto;
    }

    /* Desktop slider viewport */
    .bi-content-slider-overflow__viewport {
      /* spacing */
      padding: 40px 0 44.64px;
      /* overflow */
      overflow: hidden;
      /* scroll */
      scroll-snap-type: none; /* We handle scrolling via JS transforms */
    }

    /* Modifier: with button — footer provides the cards-to-button gap (avoid double padding) */
    &.bi-content-slider-overflow--with-button {
      .bi-content-slider-overflow__viewport {
        /* spacing */
        padding-bottom: 0;
      }

      .bi-content-slider-overflow__footer {
        /* spacing */
        padding-top: 40px;
      }
    }

    /* Desktop track - 3 cards visible */
    .bi-content-slider-overflow__track {
      /* layout */
      display: grid;
      grid-auto-flow: column; /* Keep column flow for slider */
      grid-auto-columns: 352px;
      grid-template-columns: unset;
      justify-items: center;
      gap: 32px; /* Spacing between cards on desktop */
      /* transition */
      transition: transform 300ms ease;
      /* dimensions */
      width: 100%;
    }

    /* Desktop slide */
    .bi-content-slider-overflow__slide {
      /* layout */
      display: flex;
      justify-content: center;
      /* dimensions */
      width: 100%;
      max-width: 352px;
      /* spacing */
      padding: 0;
      /* sizing */
      box-sizing: border-box;
      /* scroll */
      scroll-snap-align: none;
    }

    /* Cards inside slider slots become fluid to fill the slot width */
    .bi-content-slider-overflow__slide .bi-card {
      max-width: 100%;
    }

    /* Column variant: 2 columns (544px per card) */
    &.bi-content-slider-overflow--columns-2 {
      .bi-content-slider-overflow__track {
        grid-auto-columns: 544px;
      }

      .bi-content-slider-overflow__slide {
        max-width: 544px;
      }
    }

    /* Column variant: 4 columns (256px per card) */
    &.bi-content-slider-overflow--columns-4 {
      .bi-content-slider-overflow__track {
        grid-auto-columns: 256px;
        gap: 24px;
      }

      .bi-content-slider-overflow__slide {
        max-width: 256px;
      }
    }

    /* Footer container — desktop: 3-column grid keeps pagination centered (col 2) and pins the button to the right edge (col 3). The 1fr on either side of the pagination guarantees it stays in the middle regardless of the button's width. */
    .bi-content-slider-overflow__footer {
      /* layout */
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      /* dimensions */
      width: 100%;
      /* spacing */
      margin: 0 auto;
      gap: 24px;
    }

    /* Pagination wrapper — center column */
    .bi-content-slider-overflow__pagination-wrapper {
      /* layout */
      grid-column: 2;
      display: flex;
      justify-content: center;
    }

    /* Button wrapper — right column, button pinned to the right edge */
    .bi-content-slider-overflow__button-wrapper {
      /* layout */
      grid-column: 3;
      justify-content: flex-end;
      /* spacing */
      padding: 0;
    }

    /* Single-page: pagination is disabled (display: none). Collapse the grid so the button spans the full row and centers itself. Prevents the button from floating between pagination and the right edge. */
    &:has(.bi-content-slider-overflow__pagination-desktop .bi-pagination-module--disabled) {
      .bi-content-slider-overflow__button-wrapper {
        grid-column: 1 / -1;
        justify-content: center;
      }
    }

    /* Mobile pagination visibility - hide on desktop */
    .bi-content-slider-overflow__pagination-mobile {
      /* layout */
      display: none;
    }

    /* Desktop pagination visibility - show on desktop */
    .bi-content-slider-overflow__pagination-desktop {
      /* layout */
      display: block;
    }
  }
}
/* Download molecule - title, infotext, and primary CTA */
/* Flat selectors: Vite emits nested &__* rules as-is; browsers without CSS nesting ignore them, so title/description styles never apply. */
.bi-download-card {
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  max-width: 328px;
  /* spacing */
  padding: 18px;
  /* color */
  background-color: var(--bi-color-container-white);
}
.bi-download-card__text {
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.bi-download-card__title {
  /* spacing */
  margin: 0;
  /* typography */
  font-family: var(--bi-font-family-primary);
  font-style: normal;
  font-size: 17px;
  line-height: var(--bi-line-height-extra-compact);
  /* color */
  color: var(--bi-color-text-black);
}
.bi-download-card__description {
  /* spacing */
  margin: 0;
  /* typography */
  font-family: var(--bi-font-family-primary);
  font-style: normal;
  font-weight: var(--bi-font-weight-regular);
  font-size: var(--bi-font-copy-m);
  line-height: var(--bi-line-height-tight);
  letter-spacing: var(--bi-letter-spacing-normal);
  /* color */
  color: var(--bi-color-text-black);
}
.bi-download-card__action {
  /* layout */
  width: fit-content;
}
.bi-download-card__action .bi-button.bi-button--primary {
  /* dimensions */
  min-height: 48px;
  /* spacing */
  padding: 0 13px;
}
.bi-img {
  /* layout */
  display: flex;
  flex-direction: column;
  gap: var(--bi-gap-medium);
  /* spacing */
  margin: 0;
}
.bi-img__picture,
.bi-img__img {
  /* dimensions */
  display: block;
  width: 100%;
}
.bi-img__img {
  height: auto;
}
.bi-img__caption {
  /* typography */
  line-height: var(--bi-line-height-tight);
}
.bi-img__caption p {
  margin: 0;
}
.bi-img__caption p + p {
  margin-top: var(--bi-gap-medium);
}
/* Suppress Bootstrap Icons ::before on our utility class */
.bi-list.bi-list::before {
  content: none;
}
/* List molecule — card container. Item spacing uses the global default
   (li:not(:last-child) margin-bottom: 20px) at mobile; overridden at desktop. */
.bi-list {
  padding: 16px 24px;
  width: 100%;
  background-color: var(--bi-color-container-white);
}
/* Contextual background – contrast with parent section */
.bi-container-white .bi-list,
.bi-container-grey .bi-list {
  background-color: var(--bi-color-surface);
}
@media (min-width: 1200px) {
  .bi-list {
    padding: 20px;
    max-width: var(--bi-max-width-desktop);
  }

  .bi-list > li:not(:last-child) {
    margin-bottom: 12px;
  }
}
/* Override the global 20px default with the ListAdvanced spacing scale. */
.bi-list.bi-list--advanced > li:not(:last-child) {
  margin-bottom: 8px;
}
/* ListAdvanced molecule */
.bi-list--advanced {
  /* spacing */
  padding: 10px 8px 8px;
}
@media (min-width: 1200px) {
  .bi-list.bi-list--advanced > li:not(:last-child) {
    margin-bottom: 16px;
  }

  .bi-list--advanced {
    /* spacing */
    padding: 16px 16px 16px 18px;
  }
}
/* DownloadList organism */
.bi-download-list.bi-container-secondary {
  background-color: var(--bi-color-container-secondary);

  .bi-list-item__file-btn {
    color: var(--bi-color-text-secondary);
  }

  :is(.bi-list-item--download, .bi-list-item--download-accordion) .bi-list-item__file-btn {
    &:visited {
      & .bi-custom-icon::before {
        color: var(--bi-color-text-secondary);
      }
    }
  }
}
.bi-download-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 18px 20px;
  background-color: var(--bi-color-surface, var(--bi-color-container-white));

  .bi-list-item--download {
    margin: 0;
  }

  .bi-list-item--download-basic {
    padding: 20px 0;
  }

  .bi-list-item--download.bi-list-item--download-extended {
    padding: 20px 0;
  }

  /* Headline — bare h2 */
  & > h2 {
    margin: 0;
    min-height: 32px;
    display: flex;
    align-items: center;
    font-family: var(--bi-font-family-headline);
  }

  /* List — bare ul */
  & > ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
  }

  .bi-download-list__accordion {
    width: 100%;

    & .bi-accordion-item__trigger {
      padding: 0 0 20px;

      &::after {
        left: 0;
        right: 0;
      }
    }

    & .bi-accordion-item__content-inner {
      padding: 0 0 20px;
    }
  }

  &:has(.bi-download-list__accordion) {
    padding: 18px 20px 0 20px;
  }

  &:not(.bi-download-list--with-headline) > ul > .bi-list-item--download-extended:first-child .bi-list-item__link {
    padding: 0;
  }

  &.bi-download-list--with-headline > ul > .bi-list-item--download-extended:first-child .bi-list-item__link {
    padding: 14px 0 0;
  }
}
@media (min-width: 1200px) {
  .bi-download-list {
    padding: 16px;
    gap: 8px;

    .bi-list-item--download.bi-list-item--download-basic {
      padding: 16px;
    }

    .bi-list-item--download.bi-list-item--download-extended {
      padding: 16px;
    }

    & > h2 {
      padding: 16px;
      font-size: var(--bi-font-headline-m);
    }

    > ul > .bi-list-item--download-extended .bi-list-item__link {
      padding: 0;
    }

    &.bi-download-list--with-headline > ul > .bi-list-item--download-extended:first-child .bi-list-item__link {
      padding: 0;
    }

    &:not(.bi-download-list--with-headline) > ul > .bi-list-item--download-extended:first-child .bi-list-item__link {
      padding: 0;
    }

    &:has(.bi-download-list__accordion) {
      padding: 0 16px;
    }

    .bi-download-list__accordion {
      padding: 0;

      & .bi-accordion-item__trigger {
        padding: 20px 16px;

        &::after {
          left: 16px;
          right: 16px;
        }
      }

      & .bi-accordion-item__content-inner {
        padding: 0 16px 20px;
      }
    }
  }
}
/* NavigationBarActionItemLink – uses Button action variant with nav-specific overrides */
.bi-navigation-bar-action-item-link {
  /* spacing */
  padding: 21.5px 24px;
  gap: 34px;
  /* color */
  background-color: var(--bi-color-base-grey-050);
  color: var(--bi-color-brand-secondary-650);

  &:hover {
    /* color */
    background-color: var(--bi-color-base-grey-100);
  }

  &:active {
    /* color */
    background-color: var(--bi-color-base-grey-150);
  }

  &:focus-visible {
    /* outline */
    box-shadow: 0 0 0 2px var(--bi-color-focus);
  }
}
/* NavigationBarActionItemMobile component - Mobile action item link */
.bi-navigation-bar-action-item-mobile {
  /* layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* dimensions */
  height: 48px;
  width: 100%;
  /* spacing */
  padding: 0 24px;
  gap: 12px;
  /* color */
  background: var(--bi-color-container-mid-grey);
  /* text decoration */
  text-decoration: none;
  /* typography */
  font-weight: var(--bi-font-weight-semibold);
  line-height: var(--bi-line-height-normal);
  letter-spacing: 0;
  /* cursor */
  cursor: pointer;
  /* transitions */
  transition: var(--transition-base);

  &:hover {
    /* color */
    background-color: var(--bi-color-background-medium-grey);
    color: var(--bi-color-text-dark-grey);
  }

  &:active {
    /* color */
    background-color: var(--bi-color-container-grey);
    color: var(--bi-color-text-dark-grey);
  }

  &:focus,
  &:focus-visible {
    /* outline */
    outline: none;
    box-shadow: inset 0 0 0 2px var(--bi-color-focus);
  }

  &:-moz-focusring {
    /* outline */
    outline: none;
  }
}
/* Text element */
.bi-navigation-bar-action-item-mobile__text {
  /* layout */
  flex: 1;
  /* color */
  color: var(--bi-color-text-secondary);
  /* typography */
  line-height: var(--bi-line-height-normal);
}
/* Icon element */
.bi-navigation-bar-action-item-mobile__icon {
  /* layout */
  flex-shrink: 0;
  /* dimensions */
  font-size: 26px;
  /* color */
  color: var(--bi-color-icon-primary);
}
/* NavigationBarItemLink component - Navigation submenu item link */
.bi-navigation-bar-item-link {
  /* layout */
  display: block;
  /* position */
  position: relative;
  /* spacing */
  padding: 18px 16px;
  /* text decoration */
  text-decoration: none;
  /* cursor */
  cursor: pointer;
  /* color */
  color: inherit;
  font-weight: var(--bi-font-weight-regular);

  &:last-child {
    /* border */
    border-bottom: none;
  }

  &[aria-current='page'] {
    /* typography */
    font-weight: var(--bi-font-weight-semibold);

    .bi-button__link {
      /* typography */
      text-decoration: underline;
      text-decoration-color: var(--bi-color-border-secondary);
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
    }
  }

  .bi-button {
    &.bi-button--secondary {
      /* layout */
      justify-content: flex-start;
      text-align: left;
      /* spacing */
      padding: 0;
      /* dimensions */
      min-height: 20px;

      &:focus,
      &:focus-visible {
        outline: none;
        box-shadow: none;
      }
    }
  }

  &:hover {
    opacity: 0.7;
  }

  &:focus {
    /* outline */
    outline: none;
  }

  &:focus-visible {
    /* outline */
    outline: 2px solid var(--bi-color-focus);
    outline-offset: -2px;
  }
}
/* NavigationBarLogo component - Logo in navigation bar */
.bi-navigation-bar__logo {
  /* position */
  z-index: var(--bi-z-index-header);
  /* layout */
  display: flex;
  align-items: flex-start;
  /* dimensions */
  height: 100%;
}
.bi-navigation-bar__logo-link {
  /* layout */
  display: flex;
  align-items: flex-start;
  /* dimensions */
  height: 100%;
  /* cursor */
  cursor: pointer;

  &:focus {
    /* outline */
    outline: none;
  }

  &:focus-visible {
    /* outline */
    outline: 2px solid var(--bi-color-focus);
    outline-offset: 2px;
  }
}
.bi-navigation-bar__logo-image {
  /* layout */
  display: block;
  /* dimensions */
  height: 56px;
  width: auto;
}
/* Desktop styles */
@media (min-width: 1200px) {
  .bi-navigation-bar__logo-image {
    /* dimensions */
    width: 204px;
    height: 117px;
  }
}
/* NavigationBarMenuIcon component - Mobile menu toggle icon */
/* Mobile toggle button */
.bi-navigation-bar__mobile-toggle {
  /* position */
  z-index: var(--bi-z-index-header);
  position: relative;
  /* layout */
  display: flex;
  align-items: center;
  justify-content: center;
  /* dimensions */
  width: 32px;
  height: 32px;
  /* spacing */
  padding: 0;
  /* border */
  border: none;
  /* typography */
  font-size: 24px;
  /* color - overridden by navigationBar.css for mobile (black when collapsed, white when expanded) */
  color: inherit;
  background: transparent;
  /* cursor */
  cursor: pointer;

  &:focus {
    /* outline */
    outline: none;
  }

  &:focus-visible {
    /* outline */
    outline: 2px solid var(--bi-color-focus);
    outline-offset: 2px;
  }
}
/* Icon switching logic */
.bi-navigation-bar__hamburger {
  /* layout */
  display: block;
  /* transitions */
  transition: opacity 0.2s ease;
}
/* Neutralize the List molecule's `.bi-list` styles that bleed into the
   Bootstrap Icons hamburger element (which legitimately carries the
   `bi-list` class). list.css adds padding/width/background and strips the
   `::before` glyph; the double `.bi-list.bi-list` raises specificity above
   those rules so the icon renders cleanly inside the 32×32 toggle button. */
.bi-navigation-bar__hamburger.bi-list.bi-list {
  padding: 0;
  width: auto;
  max-width: none;
  background-color: transparent;
  gap: 0;
}
.bi-navigation-bar__hamburger.bi-list.bi-list::before {
  content: '\f479';
}
.bi-navigation-bar__close {
  /* layout - flex to remove icon font line-height gap */
  display: none;
  align-items: center;
  justify-content: center;
  /* typography */
  font-size: 35px;
  line-height: 1;
  /* transitions */
  transition: opacity 0.2s ease;
}
/* When menu is open */
.bi-navigation-bar__mobile-toggle--open .bi-navigation-bar__hamburger {
  /* layout */
  display: none;
}
.bi-navigation-bar__mobile-toggle--open .bi-navigation-bar__close {
  /* layout */
  display: flex;
}
/* Desktop styles */
@media (min-width: 1200px) {
  /* Hide mobile toggle on desktop */
  .bi-navigation-bar__mobile-toggle {
    /* layout */
    display: none;
  }
}
/* NavigationBarMenuItemDesktop component - Desktop navigation menu item */
.bi-navigation-bar-menu-item-desktop {
  /* layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* dimensions */
  height: 55px;
  width: fit-content;
  /* spacing */
  padding: 0 18px;
  /* border */
  border: none;
  /* color */
  color: var(--bi-color-text-secondary);
  /* text decoration */
  text-decoration: none;
  /* typography */
  font-size: var(--bi-font-size-xl);
  font-weight: var(--bi-font-weight-semibold);
  line-height: var(--bi-line-height-mini);
  letter-spacing: var(--bi-letter-spacing-relaxed);
  /* cursor */
  cursor: pointer;
  /* behavior */
  user-select: none;

  /* Current page / hover / active indicator - text-width underline 10px below text */
  &[aria-current='page'],
  &:hover,
  &:active {
    text-decoration: underline;
    text-decoration-color: var(--bi-color-border-secondary);
    text-decoration-thickness: 2px;
    text-underline-offset: 10px;
  }

  &:focus {
    /* outline */
    outline: none;
  }

  &:focus-visible {
    /* outline */
    outline: 2px solid var(--bi-color-focus);
    outline-offset: 4px;
    /* border */
    border: none;
    border-radius: 0;
    border-bottom: 4px solid var(--bi-color-focus);
  }
}
/* Show underline when submenu is open - text-width underline per Figma */
.bi-navigation-bar__nav-item-wrapper--open
  .bi-navigation-bar-menu-item-desktop {
  text-decoration: underline;
  text-decoration-color: var(--bi-color-border-secondary);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}
/* NavigationBarMenuItemMobile component - Mobile navigation menu item with accordion support */
.bi-navigation-bar-menu-item-mobile {
  /* color */
  background-color: var(--bi-color-container-secondary);
  color: var(--bi-color-text-white);
  /* text decoration */
  text-decoration: none;

  /* Accordion item modifier */
  .bi-navigation-bar-menu-item-mobile--accordion-item {
    /* dimensions */
    width: 100%;
    /* border */
    border: none;
  }

  /* Button override */
  .bi-button {
    /* spacing */
    padding: 0;
  }

  /* Accordion component overrides */
  .bi-accordion-item {
    /* spacing */
    margin: 0;
    /* color */
    background-color: var(--bi-color-container-secondary);
  }

  /* Accordion trigger - Open state (slightly darker blue per Figma) */
  .bi-accordion-item--open .bi-accordion-item__trigger {
    /* color */
    background: var(--bi-color-brand-secondary-active);

    &:hover {
      /* color */
      background: var(--bi-color-brand-secondary-active);
    }
  }

  /* Accordion trigger */
  .bi-accordion-item__trigger {
    /* layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* dimensions */
    height: 48px;
    width: 100%;
    /* spacing */
    padding: 0 24px;
    /* border */
    border: none;
    /* color */
    background-color: var(--bi-color-container-secondary);
    color: var(--bi-color-text-white);
    /* cursor */
    cursor: pointer;
    /* text */
    text-align: left;

    &:hover {
      /* color */
      background-color: var(--bi-color-container-secondary);
      opacity: 0.9;
    }

    &:focus {
      /* outline */
      outline: none;
    }

    &:focus-visible {
      /* outline */
      outline: none;
      box-shadow: inset 0px 0px 0px 2px var(--bi-color-focus);
      /* position */
      z-index: 10;
    }
  }

  /* Accordion trigger text - regular weight inactive, semibold when expanded per Figma */
  .bi-accordion-item__trigger-text {
    /* layout */
    flex: 1;
    /* typography */
    font-size: var(--bi-font-copy-m);
    font-weight: var(--bi-font-weight-semibold);
    font-family: var(--bi-font-family-primary);
    line-height: var(--bi-line-height-mini);
    letter-spacing: 0.2px;
  }

  .bi-accordion-item--open .bi-accordion-item__trigger-text {
    font-weight: var(--bi-font-weight-semibold);
  }

  /* Accordion trigger icon */
  .bi-accordion-item__trigger-icon {
    /* layout */
    display: flex;
    align-items: center;
    justify-content: center;
    /* dimensions */
    height: 18px;
    width: 20px;
    /* typography */
    font-size: 18px;
    /* color */
    color: var(--bi-color-text-white);
    /* transitions */
    transition: transform 0.2s ease;
  }

  /* Accordion trigger icon - Open state */
  .bi-accordion-item--open .bi-accordion-item__trigger-icon {
    /* transforms */
    transform: rotate(180deg);
  }

  /* Accordion wrapper (content panel) */
  .bi-accordion-item__wrapper {
    /* dimensions */
    max-height: 0;
    /* overflow */
    overflow: hidden;
    /* color */
    opacity: 0;
    /* transitions */
    transition:
      max-height 0.3s ease,
      opacity 0.3s ease;
  }

  /* Accordion wrapper - Open state */
  .bi-accordion-item--open .bi-accordion-item__wrapper {
    /* dimensions */
    max-height: 1000px;
    /* color */
    opacity: 1;
  }

  /* Close accordions when mobile menu container is closed */
  .bi-navigation-bar__mobile-container:not(
      .bi-navigation-bar__mobile-container--open
    )
    .bi-accordion-item--open
    .bi-accordion-item__wrapper {
    /* dimensions */
    max-height: 0;
    /* color */
    opacity: 0;
    /* transitions - faster than menu close to prevent overlap */
    transition:
      max-height 0.15s ease,
      opacity 0.15s ease;
  }

  /* Reset accordion icon when mobile menu closes */
  .bi-navigation-bar__mobile-container:not(
      .bi-navigation-bar__mobile-container--open
    )
    .bi-accordion-item--open
    .bi-accordion-item__trigger-icon {
    /* transforms */
    transform: rotate(0deg);
    /* transitions */
    transition: transform 0.15s ease;
  }

  /* Accordion content inner */
  .bi-accordion-item__content-inner {
    /* spacing */
    padding: 0;
  }

  /* Accordion description */
  .bi-accordion-item__description {
    /* spacing */
    padding: 0;
    margin: 0;
    /* typography */
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
  }

  /* Legacy accordion trigger (deprecated - use .bi-accordion-item__trigger) */
  .bi-navigation-bar-menu-item-mobile__trigger {
    /* layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* dimensions */
    height: 48px;
    width: 100%;
    /* spacing */
    padding: 0 24px;
    /* border */
    border: none;
    /* color */
    background-color: var(--bi-color-container-secondary);
    color: var(--bi-color-text-white);
    /* cursor */
    cursor: pointer;
    /* text */
    text-align: left;

    &:hover {
      /* color */
      background-color: var(--bi-color-container-secondary);
      opacity: 0.9;
    }

    &:focus {
      /* outline */
      outline: 2px solid var(--bi-color-focus-secondary);
      outline-offset: 2px;
    }

    &:focus-visible {
      /* outline */
      outline: 2px solid var(--bi-color-focus-secondary);
      outline-offset: 2px;
    }
  }

  .bi-navigation-bar-menu-item-mobile__trigger-text {
    /* layout */
    flex: 1;
  }

  .bi-navigation-bar-menu-item-mobile__trigger-icon {
    /* layout */
    display: flex;
    align-items: center;
    justify-content: center;
    /* dimensions */
    height: 24px;
    width: 24px;
    /* typography */
    font-size: 12px;
    /* transitions */
    transition: transform 0.2s ease;
  }

  /* Legacy wrapper (deprecated) */
  .bi-navigation-bar-menu-item-mobile__wrapper {
    /* dimensions */
    max-height: 0;
    /* overflow */
    overflow: hidden;
    /* color */
    opacity: 0;
    /* transitions */
    transition:
      max-height 0.3s ease,
      opacity 0.3s ease;
  }

  /* Open state (legacy - use .bi-accordion-item--open) */
  &.bi-navigation-bar-menu-item-mobile--open {
    .bi-navigation-bar-menu-item-mobile__trigger-icon {
      /* transforms */
      transform: rotate(180deg);
    }

    .bi-navigation-bar-menu-item-mobile__wrapper {
      /* dimensions */
      max-height: 1000px;
      /* color */
      opacity: 1;
    }
  }
}
/* NavigationBarSubMenuItemMobile component - Mobile submenu item link */
.bi-navigation-bar-sub-menu-item-mobile {
  /* layout */
  display: flex;
  align-items: center;
  /* position */
  position: relative;
  /* dimensions */
  height: 48px;
  width: 100%;
  /* color */
  background: var(--bi-color-container-white);

  .bi-button,
  .bi-button .bi-button__link {
    /* dimensions */
    height: 100%;
    width: 100%;
  }

  .bi-button {
    /* layout */
    justify-content: flex-start;
    text-align: left;
  }

  .bi-button .bi-button__link {
    /* spacing */
    padding: 0 24px;
    /* typography */
    font-weight: var(--bi-font-weight-semibold);
  }

  &[aria-current='page'] .bi-button .bi-button__link {
    /* typography */
    text-decoration: underline;
    text-decoration-color: var(--bi-color-border-secondary);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  &:active {
    /* color */
    opacity: 0.9;
  }

  .bi-button.bi-button--secondary {
    &:focus {
      outline: none;
    }

    &:focus-visible {
      /* outline */
      outline: 4px solid var(--bi-color-focus);
      outline-offset: 2px;
    }
  }
}
/* NavigationBarMenuMobile component - Mobile navigation menu */
/* Mobile menu container - wraps logo and menu */
.bi-navigation-bar__mobile-container {
  /* position */
  z-index: var(--bi-z-index-mobile-menu);
  position: fixed;
  top: var(--navigation-bar-height);
  left: 0;
  right: 0;
  /* dimensions */
  max-height: calc(100vh - var(--navigation-bar-height));
  /* layout */
  display: flex;
  flex-direction: column;
  /* color */
  background-color: var(--bi-color-container-secondary);
  /* transforms */
  transform: translateY(-100%);
  /* visibility */
  opacity: 0;
  visibility: hidden;
  /* overflow */
  overflow: hidden;
  /* transitions */
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    visibility 0.3s ease;
}
/* When menu is open */
.bi-navigation-bar__mobile-container--open {
  /* transforms */
  transform: translateY(0);
  /* visibility */
  opacity: 1;
  visibility: visible;
  /* overflow - allow scrolling when open */
  overflow-y: auto;
  overflow-x: hidden;
}
/* Main navigation mobile */
.bi-navigation-bar__nav--mobile {
  /* dimensions */
  max-height: calc(100vh - var(--navigation-bar-height));
  /* layout */
  display: flex;
  flex-direction: column;
}
/* Utilities in expanded menu - white text per Figma (not topic-special) */
.bi-navigation-bar__mobile-container .bi-navigation-bar__utilities {
  color: var(--bi-color-text-white);
}
/* Mobile: user menu — switch from absolute to static so it is not clipped
   by the overflow-x: hidden on the open mobile container. The white design
   (background, shadow, link colours) is unchanged; it just sits inline. */
.bi-navigation-bar__mobile-container .bi-user-menu {
  /* layout — in-flow so overflow can't clip it */
  position: static;
  /* reset absolute-positioning helpers */
  width: 100%;
  max-width: 100%;
  transform: none;
  top: auto;
  left: auto;
}
/* Desktop styles */
@media (min-width: 1200px) {
  /* Hide mobile navigation container on desktop */
  .bi-navigation-bar__mobile-container {
    /* layout */
    display: none;
  }
}
/* NavigationBarSubMenu component - Desktop navigation submenu flyout */
.bi-navigation-bar-menu-sub {
  /* layout */
  display: none;
  /* position */
  position: absolute;
  left: 0;
  top: 117px;
  z-index: var(--bi-z-index-mobile-menu);
  /* dimensions */
  width: 100vw;
  /* spacing */
  padding: 31px;
  /* color */
  background-color: var(--bi-color-container-white);
  /* transforms */
  transform: translateY(6px);
  /* shadow */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Content container - dark blue title & links per Figma */
.bi-navigation-bar-menu-sub__content {
  /* dimensions */
  max-width: 1120px;
  /* spacing */
  margin: 0 auto;
  /* color */
  color: var(--bi-color-text-secondary);
}
/* Header section */
.bi-navigation-bar-menu-sub__header {
  /* layout */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* dimensions */
  width: 100%;

  .bi-desktop-navigation-bar__close {
    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* dimensions */
    width: 40px;
    height: 40px;
    /* typography */
    line-height: 0;
    /* color */
    color: var(--bi-color-icon-secondary);
    /* cursor */
    cursor: pointer;
    /* behavior */
    flex-shrink: 0;

    /* Icon size - change this to adjust icon size without affecting container */
    &::before {
      /* typography */
      font-size: 40px;
    }

    &:hover {
      opacity: 0.7;
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--bi-color-focus);
    }
  }
}
/* Overview section */
.bi-navigation-bar-menu-sub__overview {
  /* layout */
  display: block;
  /* position */
  position: relative;
  /* spacing */
  padding: 16px;
  /* dimensions */
  min-width: 352px;
  /* text decoration */
  text-decoration: none;
  /* cursor */
  cursor: pointer;
  /* color */
  color: inherit;

  &[aria-current='page'] {
    /* typography */

    .bi-button__link {
      /* typography */
      text-decoration: underline;
      text-decoration-color: var(--bi-color-border-secondary);
      text-decoration-thickness: 2px;
      text-underline-offset: 10px;
    }
  }

  .bi-button {
    &.bi-button--secondary {
      /* typography */
      font-size: var(--bi-font-size-xxl-mobile);
      padding: 0;
      min-height: 24px;

      &:focus,
      &:focus-visible {
        outline: none;
        box-shadow: none;
      }
    }
  }

  &:hover {
    opacity: 0.7;
  }

  &:focus {
    /* outline */
    outline: none;
  }

  &:focus-visible {
    /* outline */
    outline: 2px solid var(--bi-color-focus);
    outline-offset: -2px;
  }
}
/* Columns container */
.bi-navigation-bar-menu-sub__columns {
  /* layout */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  /* spacing */
  gap: 32px;
}
/* Column (sub-items) - spans 2 of 3 grid columns */
.bi-navigation-bar-menu-sub__column {
  /* layout */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column: span 2;
  gap: 0 32px;
  align-items: start;
}
/* Right column (action items) - reset to single column */
.bi-navigation-bar-menu-sub__column--right {
  /* layout */
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: flex-start;
  /* dimensions */
  width: fit-content;
  min-width: 278px;
  /* spacing */
  gap: 15px;
}
/* Show menu when parent nav item wrapper has --open modifier */
.bi-navigation-bar__nav-item-wrapper--open .bi-navigation-bar-menu-sub {
  /* layout */
  display: block;
}
/* Hide on mobile */
@media (max-width: 1199px) {
  .bi-navigation-bar-menu-sub {
    /* layout */
    display: none;
  }
}
/* NavigationBarSearchDesktop component - Desktop search icon button */
.bi-navigation-bar-search-desktop {
  /* layout */
  display: flex;
  align-items: center;
  justify-content: center;
  /* dimensions */
  height: 48px;
  width: fit-content;
  /* spacing */
  padding: 0 10px 0 18px;
  /* border */
  border: none;
  /* color - dark blue per Figma (on white nav) */
  background: none;
  color: var(--bi-color-text-secondary);
  /* cursor */
  cursor: pointer;
  /* behavior */
  flex-shrink: 0;

  &:focus {
    /* outline */
    outline: none;
  }

  &:focus-visible {
    /* outline */
    outline: 2px solid var(--bi-color-focus);
    outline-offset: 2px;
  }
}
/* Icon element */
.bi-navigation-bar-search-desktop__icon {
  /* position */
  position: relative;
  /* dimensions */
  font-size: 16px;
  /* color */
  color: inherit;
  /* thickness - using filter to create thicker appearance */
  filter: drop-shadow(0.5px 0 0 currentColor)
    drop-shadow(-0.5px 0 0 currentColor) drop-shadow(0 0.5px 0 currentColor)
    drop-shadow(0 -0.5px 0 currentColor);

  &::after {
    content: '';
    /* position */
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    /* dimensions */
    height: 1px;
    /* color */
    background-color: var(--bi-color-border-secondary);
    /* visibility */
    opacity: 0;
    /* transitions */
    transition: opacity 0.2s ease;
  }

  .bi-navigation-bar-search-desktop:hover &::after,
  .bi-navigation-bar-search-desktop:active &::after {
    /* visibility */
    opacity: 1;
  }
}
/* NavigationBarSearchMobile component - Mobile search button */
.bi-navigation-bar-search-mobile {
  /* layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* dimensions */
  width: 100%;
  height: 48px;
  /* spacing */
  padding: 18px 24px;
  /* border */
  border: none;
  /* color */
  background-color: var(--bi-color-container-secondary);
  color: var(--bi-color-text-white);
  /* cursor */
  cursor: pointer;
  /* transitions */
  transition: var(--transition-base);

  &:hover {
    /* color */
    background-color: var(--bi-color-container-secondary);
    opacity: 0.9;
  }

  &:active {
    /* color */
    background-color: var(--bi-color-container-secondary);
    opacity: 0.9;
  }

  &:focus {
    /* outline */
    outline: none;
  }

  &:focus-visible {
    /* outline */
    outline: none;
    box-shadow: inset 0 0 0 2px var(--bi-color-focus-secondary);
  }
}
/* Text element */
.bi-navigation-bar-search-mobile__text {
  /* typography */
  line-height: var(--bi-line-height-normal);
  /* color */
  color: var(--bi-color-text-white);
}
/* Search input inside mobile container - hidden by default, shown when open */
.bi-navigation-bar__search-mobile .bi-navigation-bar-search-input {
  /* layout */
  display: none;
}
/* When open: hide the button, show the input */
.bi-navigation-bar__search-mobile--open .bi-navigation-bar-search-mobile {
  /* layout */
  display: none;
}
.bi-navigation-bar__search-mobile--open .bi-navigation-bar-search-input {
  /* layout */
  display: flex;
}
/* Icon element */
.bi-navigation-bar-search-mobile__icon {
  /* dimensions */
  font-size: 23px;
  /* spacing */
  margin-right: -3px;
  /* color */
  color: var(--bi-color-text-white);
  /* thickness - using filter to create thicker appearance */
  filter: drop-shadow(0.5px 0 0 currentColor)
    drop-shadow(-0.5px 0 0 currentColor) drop-shadow(0 0.5px 0 currentColor)
    drop-shadow(0 -0.5px 0 currentColor);
}
/* NavigationBarSearchInput component - Search input for mobile and desktop */
/* Wrapper: stacks the search input row + autocomplete suggestions vertically.
   Mobile lives in the grey drawer; desktop is inside the fixed overlay below
   the navbar. Plain block stacking — flex column would interact with the UL's
   `margin: 0 auto` (from `bi-container`) and prevent it from centering at
   >= 1200px (auto margins on flex items eat free space instead of centering). */
.bi-navigation-bar-search-input-wrap {
  /* dimensions */
  width: 100%;
}
/* New design: light grey band, thin light blue separator below, white pill input, dark blue close icon */
.bi-navigation-bar-search-input {
  /* layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* dimensions */
  width: 100%;
  height: 48px;
  /* spacing */
  padding: 11px 15px;
  /* border - thin light blue line below to separate from nav */
  border: none;
  /* color */
  background-color: var(--bi-color-container-mid-grey);
  /* behavior */
  box-sizing: border-box;
}
/* Search field - white pill shape per new design */
.bi-navigation-bar-search-input__field {
  /* layout */
  flex: 1;
  min-width: 0;
  /* dimensions */
  width: 100%;
  height: 26px;
  /* spacing */
  padding: 7px 9px;
  margin: 0;
  /* border */
  border: none;
  border-radius: var(--bi-radius-full);
  /* color */
  background-color: var(--bi-color-container-white);
  color: var(--bi-color-text-secondary);
  /* typography */
  font-weight: var(--bi-font-weight-bold);
  /* behavior */
  box-sizing: border-box;
  outline: none;

  &::placeholder {
    /* color - medium-dark purplish-grey per new design */
    color: var(--bi-color-brand-grey-active);
  }

  &:focus {
    /* outline */
    outline: none;
  }

  &:focus-visible {
    /* outline */
    outline: none;
  }
}
/* Close button - dark blue-purple to match nav per new design */
.bi-navigation-bar-search-input__close {
  /* layout */
  display: flex;
  align-items: center;
  justify-content: center;
  /* typography */
  font-size: 36px;
  /* spacing */
  padding: 0;
  margin-right: 6px;
  /* border */
  border: none;
  /* color */
  background: none;
  color: var(--bi-color-text-secondary);
  /* cursor */
  cursor: pointer;
  /* behavior */
  flex-shrink: 0;

  &:hover {
    /* color */
    opacity: 0.7;
  }

  &:active {
    /* color */
    opacity: 0.5;
  }

  &:focus {
    /* outline */
    outline: none;
  }

  &:focus-visible {
    /* outline */
    outline: none;
    box-shadow: 0 0 0 2px var(--bi-color-focus);
    border-radius: 2px;
  }
}
/* Close icon */
.bi-navigation-bar-search-input__close-icon {
  /* typography */
  font-size: 35px;
  /* spacing */
  margin-right: -4px;
  /* color */
  color: inherit;
}
/* Suggestions list — mobile sits below the input inside the grey drawer.
   Desktop overrides this in the @media block below. The UL also carries the
   `bi-container` class so it inherits the same max-width + margin centering
   as the input row at >= 1200px (otherwise chips would left-align to the
   page edge while the input is centered).
   Chip styling lives in the shared SearchAutocomplete atom. */
.bi-navigation-bar-search-input__suggestions {
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  /* spacing — `margin: 0 auto` so bi-container's centering still works at >= 1200px */
  padding: 4px 15px 16px 15px;
  margin: 0 auto;
  /* reset list */
  list-style: none;
  /* color */
  background-color: var(--bi-color-container-mid-grey);

  &[hidden] {
    display: none;
  }
}
/* Desktop search input wrapper - hidden by default, shown with --open modifier */
.bi-navigation-bar__search-input--desktop {
  /* layout */
  display: none;
}
/* Visible when search is open */
.bi-navigation-bar__search-input--desktop.bi-navigation-bar__search-input--open {
  /* layout */
  display: block;
}
/* Desktop specific styles */
@media (min-width: 1200px) {
  /* Desktop search input - fixed below nav so it sticks when the page is scrolled */
  .bi-navigation-bar__search-input--desktop {
    /* position */
    position: fixed;
    top: 121px;
    left: 0;
    right: 0;
    z-index: calc(var(--bi-z-index-header) - 1);
    /* dimensions */
    width: 100%;
    /* color */
    background-color: var(--bi-color-container-white);
  }

  .bi-navigation-bar-search-input {
    /* dimensions */
    height: 58px;
    /* spacing */
    padding: 0 165px 0 203px;
    /* color */
    background-color: transparent;
  }

  /* Search field - flat style with left border pipe */
  .bi-navigation-bar-search-input__field {
    /* spacing */
    padding: 0 0 0 12px;
    /* border */
    border-radius: 0;
    border-left: 2px solid var(--bi-color-border-secondary);
    /* color */
    color: var(--bi-color-text-secondary);
    opacity: 0.5;
    background-color: transparent;
    /* typography */
    font-size: 22px;

    &::placeholder {
      /* color */
      color: var(--bi-color-text-secondary);
    }
  }

  /* Close button */
  .bi-navigation-bar-search-input__close {
    /* dimensions */
    height: 100%;
    /* spacing */
    margin-right: 0;
  }

  /* Close icon - larger size to match desktop context */
  .bi-navigation-bar-search-input__close-icon {
    /* typography */
    font-size: 40px;
    /* spacing */
    margin-right: 0;
  }

  /* Desktop suggestions: same horizontal padding as the input row, white bg */
  .bi-navigation-bar-search-input__suggestions {
    /* spacing — align chips with the input's left edge (203px) and breathe at the bottom */
    padding: 4px 165px 24px 203px;
    /* color */
    background-color: var(--bi-color-container-white);
  }
}
/* NavigationBarLanguage component - Language switcher dropdown */
.bi-navigation-bar-utilities__language {
  /* position */
  position: relative;
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* Toggle button */
  .bi-navigation-bar-utilities__language-toggle {
    /* layout */
    display: flex;
    align-items: center;
    gap: 5px;
    /* spacing */
    padding: 0;
    /* color */
    color: var(--bi-color-text-grey);
    background: none;
    border: none;
    /* typography */
    line-height: var(--bi-line-height-normal);
    text-decoration: none;
    /* interaction */
    cursor: pointer;

    &:hover {
      opacity: 0.7;
    }

    &:active {
      opacity: 0.9;
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: 2px solid var(--bi-color-focus);
      outline-offset: 2px;
      box-shadow: none;
    }
  }

  /* Chevron icon */
  .bi-navigation-bar-utilities__language-icon {
    /* position */
    position: relative;
    top: 2px;
    /* color */
    color: var(--bi-color-text-grey);
    /* typography */
    font-size: 14px;
    /* transitions */
    transition: transform 0.2s ease;
  }

  /* Open state */
  &.bi-navigation-bar-utilities__language--open {
    .bi-navigation-bar-utilities__language-icon {
      /* transforms */
      transform: rotate(180deg);
    }

    .bi-navigation-bar-utilities__language-options {
      /* layout */
      display: flex;
    }
  }

  /* Options dropdown container — reset global li styles */
  .bi-navigation-bar-utilities__language-options > li {
    display: block;
    min-height: unset;
    margin-bottom: 0;
    font: inherit;
    color: inherit;
  }

  .bi-navigation-bar-utilities__language-options > li::before {
    content: none;
  }

  /* Options dropdown container */
  .bi-navigation-bar-utilities__language-options {
    /* position */
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: calc(var(--bi-z-index-header) + 2);
    /* layout */
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    list-style: none;
    /* spacing */
    padding: 0;
    /* transforms */
    transform: translateX(-50%);
  }

  /* Individual language option - each is its own pill */
  .bi-navigation-bar-utilities__language-option {
    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* spacing */
    padding: 4px 14px;
    /* color */
    background-color: var(--bi-color-container-white);
    color: var(--bi-color-text-secondary);
    border-radius: var(--bi-radius-full);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* typography */
    text-decoration: none;
    white-space: nowrap;
    /* interaction */
    cursor: pointer;

    &:hover {
      opacity: 0.7;
    }

    &:active {
      opacity: 0.9;
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: 2px solid var(--bi-color-focus);
      outline-offset: 2px;
      box-shadow: none;
    }
  }
}
/* Desktop */
@media (min-width: 1200px) {
  .bi-navigation-bar__utilities--desktop .bi-navigation-bar-utilities__language {
    --default-color: #64545a;
    --highlight-color: #43383c;

    .bi-navigation-bar-utilities__language-toggle {
      /* layout */
      gap: 2px;
      /* dimensions */
      min-height: 32px;
      /* color */
      /* color: var(--bi-color-brand-grey-mid); */
      color: var(--default-color);
      /* typography */
      font-size: 18px;
      letter-spacing: 0.6px;

      &:hover {
        opacity: 1;
        color: var(--highlight-color) !important;
      }
    }

    .bi-navigation-bar-utilities__language-icon {
      /* color */
      /* color: var(--bi-color-brand-grey-mid); */
     color: var(--default-color);
      /* typography */
      font-size: 14px;
      -webkit-text-stroke: 1px currentColor;
    }

    .bi-navigation-bar-utilities__language-options {
      /* spacing */
      margin-top: -6px;
      /* interaction */
      cursor: pointer;
    }

    /* Desktop open state */
    &.bi-navigation-bar-utilities__language--open {
      .bi-navigation-bar-utilities__language-options {
        /* interaction */
        pointer-events: auto;
      }

      .bi-navigation-bar-utilities__language-option {
        /* layout */
        display: inline-flex;
      }
    }

    /* Desktop option - hidden by default, revealed on open */
    .bi-navigation-bar-utilities__language-option {
      /* layout */
      display: none;
      /* dimensions */
      min-height: 28px;
      /* spacing */
      padding: 0 14px;
      /* color */
      background-color: var(--bi-color-container-secondary);
      color: var(--bi-color-text-white);
      box-shadow: none;
      /* typography */
      font-size: inherit;
      font-family: inherit;
      text-align: center;

      &:hover {
        background-color: var(--bi-color-brand-secondary-active);
        opacity: 1;
      }

      &:active {
        background-color: var(--bi-color-brand-secondary-active);
      }
    }
  }
}
/* NavigationBarUtilities component - Utility navigation items (mobile and desktop) */
/* Mobile utilities */
.bi-navigation-bar__utilities {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
  gap: 24px;
  color: var(--bi-color-text-grey);

  .bi-button {
    min-height: 20px;
    padding: 0;
  }

  .bi-button--secondary {
    height: 20px;
    padding: 0;
    color: var(--bi-color-text-grey);

    .bi-button__link {
      color: var(--bi-color-text-grey);
    }

    &:hover {
      opacity: 0.7;
      /* override bi-button--secondary hover (brand blue) – match language / utility grey */
      color: var(--bi-color-text-grey);
    }

    &:hover .bi-button__link {
      color: inherit;
    }

    &:active {
      opacity: 0.9;
      color: var(--bi-color-text-grey);
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: 2px solid var(--bi-color-focus);
      outline-offset: 2px;
      box-shadow: none;
    }
  }

  .bi-navigation-bar-utilities__user-icon {
    font-size: 20px;
  }
}
/* Desktop utilities */
.bi-navigation-bar__utilities--desktop {
  display: none;
}
@media (min-width: 1200px) {
  .bi-navigation-bar__utilities--desktop {
    --default-color: #64545a;
    --highlight-color: #43383c;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 5px;
    margin-right: 5px;
    padding: 0;
    gap: 15px;
    /* color: var(--bi-color-brand-grey-mid); */
    color: var(--default-color);

    .bi-button--secondary {
      /* color: var(--bi-color-brand-grey-mid); */
      color: var(--default-color);
      padding: 0;
      gap: 0;
      min-height: 32px;
      letter-spacing: 0.6px;

      a {
        /* color: var(--bi-color-brand-grey-mid); */
        color: var(--default-color);
      }

      &:hover {
        opacity: 1;
        /* override bi-button--secondary hover (brand blue) – match language / utility grey */
        /* color: var(--bi-color-brand-grey-mid);*/
        color: var(--highlight-color);


      }

      &:hover .bi-button__link {
        color: inherit;
      }

      &:active {
        opacity: 1;
        /* color: var(--bi-color-brand-grey-mid);*/
        color: var(--highlight-color);
      }

      &:focus {
        outline: none;
      }

      &:focus-visible {
        outline: 2px solid var(--bi-color-focus);
        outline-offset: 2px;
        box-shadow: none;
      }
    }

    .bi-navigation-bar-utilities__user-icon {
      font-size: 24px;
      color: inherit;
    }

    .bi-button__link:has(.bi-navigation-bar-utilities__user-icon) {
      gap: 0;
      align-items: center;
    }
  }
}
.bi-navigation-bar-utilities__account {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bi-navigation-bar-utilities__account [hidden] {
  display: none;
}
.bi-navigation-bar-utilities__account-logged-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bi-navigation-bar-utilities__account-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  /* prevent button from growing unbounded on long names */
  max-width: 180px;

  .bi-navigation-bar-utilities__user-label {
    /* truncate long display names with ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (min-width: 1200px) {
  .bi-navigation-bar__utilities--desktop .bi-navigation-bar-utilities__account,
  .bi-navigation-bar__utilities--desktop
    .bi-navigation-bar-utilities__account-logged-in {
    align-items: flex-end;
  }
}
/* NavigationBarUserMenu molecule – logged-in user dropdown */
.bi-user-menu {
  /* position */
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: calc(var(--bi-z-index-header) + 3);
  /* transform */
  transform: translateX(-50%);
  /* dimensions */
  width: 233px;
  max-width: min(233px, 90vw);
  /* color */
  background-color: var(--bi-color-container-white);
  /* elevation */
  box-shadow: var(--bi-elevation-big);

  /* Menu list */
  .bi-user-menu__list {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* spacing */
    margin: 0;
    padding: 16px;
    /* list */
    list-style: none;
  }

  /* Menu item */
  .bi-user-menu__item {
    /* spacing – override the global li hanging-indent padding */
    margin: 0;
    padding: 0;
    /* dimensions – override the global li min-height */
    min-height: 0;

    &::before {
      display: none;
    }
  }

  /* Menu link */
  .bi-user-menu__link {
    /* layout */
    display: block;
    /* dimensions */
    width: 100%;
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    font-weight: var(--bi-font-weight-regular);
    text-decoration: none;
    /* color */
    color: var(--bi-color-text-black);
    /* spacing */
    padding: 4px 0;

    &:hover {
      color: var(--bi-color-brand-secondary-hover);
    }

    &:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
    }
  }

  /* Active/current-page link — bold + highlighted color */
  .bi-user-menu__link--active {
    /* typography */
    font-weight: var(--bi-font-weight-semibold);
    /* color */
    color: var(--bi-color-brand-secondary);
  }

  /* Logout item — visually separated from navigation items */
  .bi-user-menu__item--logout {
    /* border */
    border-top: 1px solid var(--bi-color-border-light);
  }
}
/* Desktop: right-align the dropdown under the trigger */
@media (min-width: 1200px) {
  .bi-navigation-bar__utilities--desktop .bi-navigation-bar-utilities__account-logged-in .bi-user-menu {
    /* position */
    left: auto;
    right: 0;
    /* transform */
    transform: none;
  }
}
/* Pagination styles - standard page navigation */
.bi-pagination {
  /* layout */
  display: flex;
  align-items: center;
  justify-content: center;
  /* spacing */
  padding: 16px 2px;
  gap: 16px;
  /* dimensions */
  max-width: 342px;

  /* Navigation buttons (first / prev / next / last) */
  .bi-pagination__first,
  .bi-pagination__prev,
  .bi-pagination__next,
  .bi-pagination__last {
    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* spacing */
    padding: 0;
    /* dimensions */
    width: 48px;
    height: 48px;
    /* styling */
    background-color: transparent;
    color: var(--bi-color-text-secondary);
    cursor: pointer;
    /* typography */
    font-size: 24px;
    /* transitions */
    transition: all 0.2s ease;

    &:hover {
      background-color: var(--bi-color-container-light-grey);
    }

    &:active {
      background-color: var(--bi-color-container-grey);
    }

    &:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus-primary);
    }

    &:disabled {
      opacity: 0.3;
      cursor: default;
      pointer-events: none;
    }
  }

  /* Mobile: hide first/last icons to fit 320px viewports.
     prev/next still cover adjacent navigation. */
  .bi-pagination__first,
  .bi-pagination__last {
    display: none;
  }

  /* Pages wrapper: centered between arrows */
  .bi-pagination__pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex: 1;
  }

  /* Page number buttons */
  .bi-pagination__page {
    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* spacing */
    padding: 0;
    /* dimensions */
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    /* styling */
    background-color: transparent;
    border: none;
    color: var(--bi-color-text-dark-grey);
    cursor: pointer;
    /* typography */
    font-size: var(--bi-font-size-md);
    font-weight: var(--bi-font-weight-medium);
    line-height: 100%;

    &:hover {
      background-color: var(--bi-color-container-light-grey);
    }

    &:active {
      background-color: var(--bi-color-container-grey);
    }

    &:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus-primary);
    }
  }

  .bi-pagination__page--active {
    /* Active page: bold, no border, no container */
    font-weight: var(--bi-font-weight-bold);
    background-color: transparent;
    color: var(--bi-color-text-dark-grey);
  }

  /* Mobile: show only two pages near the ellipsis per side */
  .bi-pagination__page--edge-left-3,
  .bi-pagination__page--edge-right-3 {
    display: none;
  }

  /* Ellipsis */
  .bi-pagination__ellipsis {
    /* layout */
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 24px;
    height: 24px;
    padding: 10px;
    /* typography */
    color: var(--bi-color-text-dark-grey);
    font-size: var(--bi-font-size-md);
    font-weight: var(--bi-font-weight-medium);
    letter-spacing: 1px;
  }
}
/* Responsive adjustments */
@media (max-width: 320px) {
  .bi-pagination {
    gap: 0;
  }
}
/* Mid-mobile (≥390px): show first/last by tightening buttons and gaps so the
   row fits a typical phone viewport (e.g. iPhone 14 = 390pt). */
@media (min-width: 390px) and (max-width: 1199px) {
  .bi-pagination {
    max-width: 360px;
    gap: 8px;

    .bi-pagination__first,
    .bi-pagination__prev,
    .bi-pagination__next,
    .bi-pagination__last {
      width: 40px;
      height: 40px;
    }

    .bi-pagination__first,
    .bi-pagination__last {
      display: inline-flex;
    }

    .bi-pagination__pages {
      gap: 8px;
    }
  }
}
@media (min-width: 1200px) {
  .bi-pagination {
    justify-content: space-between;
    gap: 8px;
    max-width: 560px;

    .bi-pagination__pages {
      gap: 8px;
    }

    .bi-pagination__page {
      width: 36px;
      height: 36px;
    }

    .bi-pagination__page--active {
      min-width: 36px;
    }

    .bi-pagination__ellipsis {
      width: 36px;
      height: 36px;
    }

    /* Desktop: show first/last icons and the extra 3-slot pages */
    .bi-pagination__first,
    .bi-pagination__last,
    .bi-pagination__page--edge-left-3,
    .bi-pagination__page--edge-right-3 {
      display: inline-flex;
    }
  }
}
/* Pagination Module styles - for carousels and content sliders */
.bi-pagination-module {
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* dimensions */
  width: 100%;

  /* Navigation buttons container */
  .bi-pagination-module__nav-buttons {
    /* layout */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    /* spacing */
    gap: 12px;

    .bi-button--icon-only {
      /* dimensions */
      width: 15.73px;
      height: 29.64px;
    }
  }

  /* Navigation buttons */
  .bi-pagination-module__prev,
  .bi-pagination-module__next {
    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* spacing */
    padding: 0;
    /* alignment */
    vertical-align: middle;
    /* cursor */
    cursor: pointer;
    /* transitions */
    transition: all 0.2s ease;

    &:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
    }

    &:hover .bi-button__icon .bi-custom-icon {
      color: var(--bi-color-brand-grey-hover);
    }

    &:active .bi-button__icon .bi-custom-icon {
      color: var(--bi-color-brand-grey-active);
    }
  }

  /* Icon container for prev/next buttons */
  .bi-pagination-module__prev .bi-button__icon,
  .bi-pagination-module__next .bi-button__icon {
    /* layout */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Rotate previous button icon 180 degrees */
  .bi-pagination-module__prev .bi-button__icon {
    transform: rotate(180deg);
  }

  /* Custom icon sizing for prev/next buttons */
  .bi-pagination-module__prev .bi-button__icon .bi-custom-icon,
  .bi-pagination-module__next .bi-button__icon .bi-custom-icon {
    font-size: 30px;
    /* layout */
    display: block;
    /* color */
    color: var(--bi-color-icon-grey-light);
    /* transitions */
    transition: color 0.2s ease;
  }

  /* Dots indicator container */
  .bi-pagination-module__dots {
    /* layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* dimensions */
    width: fit-content;
    min-width: 32px;
    min-height: 8px;
    height: 8px;
    flex-shrink: 0;
    /* position */
    position: relative;
    /* spacing */
    gap: 2.8px;
    /* overflow */
    overflow: visible;
    /* box sizing */
    box-sizing: border-box;
  }

  /* Individual dot */
  .bi-pagination-module__dot {
    /* layout */
    display: block;
    /* dimensions */
    width: 6.9px;
    height: 6.9px;
    flex-shrink: 0;
    /* position */
    position: relative;
    /* color */
    background-color: var(--bi-color-icon-grey-light);
    /* border */
    border-radius: 50%;
    /* transitions */
    transition: background-color 0.2s ease;
    /* box sizing */
    box-sizing: border-box;
  }

  /* Active dot */
  .bi-pagination-module__dot--active {
    /* color */
    background-color: var(--bi-color-button-secondary);
  }

  /* Pulse animation for active dot when staying in middle position */
  .bi-pagination-module__dot--pulse {
    animation: dot-pulse 0.4s ease-out;
  }

  @keyframes dot-pulse {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.3);
      opacity: 0.8;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  /* Modifier: Disabled state — fully hidden when no scrolling needed */
  &.bi-pagination-module--disabled {
    display: none;
  }
}
/* Active dot override for blue background */
.bi-container-secondary .bi-pagination-module__dot--active {
  /* color */
  background-color: var(--bi-color-text-white);
}
/* Desktop layout (>=1200px): larger arrows, dots in a row */
@media (min-width: 1200px) {
  .bi-pagination-module {
    .bi-pagination-module__nav-buttons {
      .bi-pagination-module__dots {
        gap: 6px;
      }

      .bi-pagination-module__dot {
        width: 11px;
        height: 11px;
      }
    }
  }
}
/* ===========================================================================
   ScrollSpy — desktop right-side overlay table of contents
   ---------------------------------------------------------------------------
   Visibility model:
   - Markup is always rendered.
   - Hidden by default (display: none).
   - Becomes a fixed overlay on the right edge of the viewport when an
     ancestor has `data-scroll-spy="true"` AND the viewport is ≥ 1920px.

   Visual model (matches Figma node 5076-6087):
   - Title "Inhalt" in primary red, top-right aligned.
   - Right-aligned headline labels.
   - A continuous blue rounded pill track sits to the right of the list.
   - A red rounded pill marks the active item; it slides over the blue
     track via CSS custom properties set by initScrollSpy.ts.
   =========================================================================== */
/* Register the indicator-driving custom properties so that changes to them
   participate in CSS transitions. Without `@property`, var()-resolved
   values jump instantly when the underlying variable changes — which is
   the cause of the indicator-jump animation glitch. */
@property --bi-scroll-spy-active-top {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}
@property --bi-scroll-spy-active-height {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}
.bi-article-layout {
  position: relative;
}
/* Keep tracked headlines clear of the sticky navigation bar when a click on
   the spy scroll-anchors to them. Scoped to .bi-article-layout so the
   data-text attribute remains free for any other future use
   without inheriting the spy's offset. */
.bi-article-layout [data-text] {
  scroll-margin-top: var(--bi-scroll-spy-top-offset, 140px);
}
.bi-scroll-spy {
  display: none;
}
@media (min-width: 1920px) {
  [data-scroll-spy='true'] .bi-scroll-spy {
    display: block;
    position: fixed;
    top: var(--bi-scroll-spy-top-offset, 140px);
    right: var(--bi-scroll-spy-right-offset, 24px);
    width: 320px;
    max-height: calc(100vh - var(--bi-scroll-spy-top-offset, 140px) - var(--bi-padding-large));
    /*overflow-y: auto;*/
    z-index: var(--bi-z-index-scroll-spy);
    pointer-events: auto;
    opacity: 1;
    transition: opacity 180ms ease;
  }

  /* When the article scope leaves the viewport (hero on top, footer below),
     fade the overlay out so it does not float over unrelated content. */
  [data-scroll-spy='true'] .bi-scroll-spy[data-in-article='false'] {
    opacity: 0;
    pointer-events: none;
  }
}
.bi-scroll-spy__title {
  margin: 0 0 var(--bi-padding-small) 0;
  text-align: right;
  font-family: var(--bi-font-family-headline);
  font-size: var(--bi-font-size-xl);
  font-weight: var(--bi-font-weight-bold);
  line-height: var(--bi-line-height-tight);
  color: var(--bi-color-brand-primary);
}
.bi-scroll-spy__nav {
  display: block;
}
/* The <ul> is the relative parent for both the always-on blue track and the
   red active indicator. Padding-right reserves room for the pill bars. */
.bi-scroll-spy__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 var(--bi-padding-small) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--bi-padding-small);
}
/* Blue track — full height of the list */
.bi-scroll-spy__list::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  border-radius: var(--bi-radius-full);
  background-color: var(--bi-color-brand-secondary-900);
  pointer-events: none;
}
/* Red active indicator — positioned via CSS custom properties from JS.
   Sits in front of the blue track via z-index. */
.bi-scroll-spy__list::before {
  content: '';
  position: absolute;
  right: 0;
  width: 8px;
  top: var(--bi-scroll-spy-active-top, 0);
  height: var(--bi-scroll-spy-active-height, 0);
  border-radius: var(--bi-radius-full);
  background-color: var(--bi-color-brand-primary);
  transition: top 220ms ease, height 220ms ease, opacity 120ms ease;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.bi-scroll-spy__list[data-active='true']::before {
  opacity: 1;
}
/* Resets defeating two rules in core.css: the global `li { padding-left:
   27px; min-height: 24px; ... }` (hanging indent for body lists) and the
   `ul > li::before` (currentColor dot bullet). Without both resets the
   spy items would render with a 27px left gutter and a leading dot. */
.bi-scroll-spy__item {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 0;
  list-style: none;
}
.bi-scroll-spy__item::before {
  content: none;
  display: none;
}
.bi-scroll-spy__item::marker {
  content: '';
}
.bi-scroll-spy__link {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  padding: var(--bi-padding-xsmall) 0;
  text-align: right;
  text-decoration: none;
  font-family: var(--bi-font-family-headline);
  font-size: var(--bi-font-headline-l);
  font-weight: var(--bi-font-weight-regular);
  line-height: var(--bi-line-height-tight);
  color: var(--bi-color-text-secondary);
  transition: color 120ms ease;
}
.bi-scroll-spy__link:hover,
.bi-scroll-spy__link:focus-visible {
  color: var(--bi-color-link-primary);
}
.bi-scroll-spy__item--active .bi-scroll-spy__link,
.bi-scroll-spy__link[aria-current='location'] {
  font-weight: var(--bi-font-weight-bold);
  color: var(--bi-color-text-secondary);
}
/* SectionBase component styles */
.bi-section-base {
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* dimensions */
  width: 100%;
  max-width: 100%;
  /* spacing — vertical padding is opt-in via the `bi-section-padded-top` /
     `bi-section-padded-bottom` helpers below (used by section organisms) or
     the spacing utilities defined in `src/styles/spacing.css` (used at call
     sites that need explicit control). */
  padding: 0 var(--bi-sides-default);
}
/* Default vertical padding helpers for sections that should breathe by default
   when used at the page top level. Keep specificity at (0,1,0) so the
   nested-zero rule below cancels them automatically when a section is nested,
   matching the previous default-padding behavior without requiring callers to
   add explicit `bi-no-padding-*` utilities. */
.bi-section-padded-top {
  padding-top: var(--bi-topbottom-default);
}
.bi-section-padded-bottom {
  padding-bottom: var(--bi-topbottom-default);
}
/* Nested sections drop all padding so their content runs edge-to-edge inside
   the parent's content box. (0,2,0) beats the `bi-section-padded-*` helpers
   (0,1,0); the spacing utilities (`bi-with-padding-*`) at (0,3,0) still win
   when applied explicitly, allowing deliberate opt-in padding on nested
   sections. */
.bi-section-base .bi-section-base {
  padding: 0;
}
/* Inner container – constrained max-width */
.bi-section-base__inner {
  width: 100%;
}
/* Content max-width for readability */
.bi-section-base__inner.bi-container {
  max-width: var(--bi-max-width-list-content);
}
/* Grid modifiers – equal-width columns, stack on mobile */
.bi-section-base--grid-2,
.bi-section-base--grid-3,
.bi-section-base--grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bi-gap-xlarge);
}
@media (min-width: 768px) {
  .bi-section-base--grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .bi-section-base--grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .bi-section-base--grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  .bi-section-padded-top {
    padding-top: 80px;
  }

  .bi-section-padded-bottom {
    padding-bottom: 80px;
  }

  .bi-section-base__inner.bi-container {
    max-width: var(--bi-max-width-desktop);
  }

  .bi-section-base--grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* For top-level or nested padding adjustments, use the spacing utilities
   (`bi-with-padding-top` / `bi-with-padding-bottom` / `bi-no-padding-top` /
   `bi-no-padding-bottom`) defined in `src/styles/spacing.css`. They work
   universally — no nesting branch required. */
/* StageBase component styles */
:root {
  --bi-width-stage-content: 608px;
  --bi-stage-base-image-height-mobile: 350px;
  --bi-stage-base-image-height-desktop: 400px;
  --bi-stage-base-min-height-desktop: 400px;
  --bi-stage-base-content-margin-top-center-desktop: 282px;
  --bi-stage-base-card-padding-desktop: 32px 64px;
  --bi-stage-base-card-padding-left-desktop: 24px;
  --bi-stage-base-card-padding-right-desktop: 32px;
}
.bi-stage-base {
  position: relative;
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: var(--bi-stage-base-image-height-mobile);

  .bi-card__image {
    /* dimensions */
    aspect-ratio: 16 / 9;
    width: 100%;
    height: var(--bi-stage-base-image-height-mobile);
    /* overflow */
    overflow: hidden;
  }

  .bi-card__picture {
    /* layout */
    display: block;
    /* dimensions */
    width: 100%;
    height: 100%;
  }

  .bi-card__img {
    /* layout */
    display: block;
    /* dimensions */
    width: 100%;
    height: 100%;
    /* media */
    object-fit: cover;
    object-position: top center;
  }

  .bi-card__content {
    /* spacing */
    margin-top: -68px;
    padding-left: 24px;
    padding-right: 24px;
    margin-bottom: 32px;
    width: 100%;
    max-width: var(--bi-max-width-desktop-l);
    /* position */
    position: relative;
    z-index: var(--bi-z-index-stage-content);

    .bi-card {
      /* position */
      position: relative;
      z-index: var(--bi-z-index-stage-content);
      /* stacking context so axe-core can determine background when card overlaps image */
      isolation: isolate;
      /* dimensions */
      max-width: var(--bi-max-width-desktop-l);
      width: unset;
      /* explicit opaque background for color-contrast when overlapping other elements */
      background-color: var(--bi-color-container-white, #fff);
      overflow: visible;

      /* Badge – hidden by default */
      .bi-badge {
        display: none;
        position: absolute;
        top: -8px;
        right: 20px;
        z-index: var(--bi-z-index-stage-content);
      }

      /* Badge visible when card has --with-badge modifier */
      &.bi-card--with-badge .bi-badge {
        display: flex;
      }
    }
  }

  &.bi-stage-base--left {
    .bi-card__content .bi-card {
      /* spacing */
      padding: 32px 16px;
      gap: 12px;
    }
  }

  &.bi-stage-base--image-only {
    min-height: 0;

    .bi-card__image {
      height: auto;
      aspect-ratio: unset;
    }
  }
}
/* Tablet override */
@media (min-width: 768px) {
  .bi-stage-base {
    .bi-card__content {
      max-width: var(--bi-width-stage-content);
    }
  }
}
/* Desktop styles with full-width image and max-width content container */
@media (min-width: 1200px) {
  .bi-stage-base {
    /* dimensions */
    min-height: var(--bi-stage-base-min-height-desktop);

    .bi-card__image {
      /* dimensions */
      width: 100%;
      height: var(--bi-stage-base-image-height-desktop);
      /* position */
      position: absolute;
      left: 0;
      /* media */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      /* overflow */
      overflow: hidden;
    }

    .bi-card__content {
      padding-left: 0;
      padding-right: 0;
      margin-bottom: 0;
      /* position */
      position: relative;
      z-index: var(--bi-z-index-stage-content);

      max-width: var(--bi-max-width-desktop-l);

      .bi-card {
        max-width: var(--bi-max-width-desktop-l);
        height: fit-content;
        padding: 32px 64px;
      }
    }

    /* Center variant */
    &.bi-stage-base--center {
      .bi-card__content {
        margin-top: var(
          --bi-stage-base-content-margin-top-center-desktop
        ); /* Center content within image area */

        .bi-card {
          width: 100%;
        }
      }
    }

    /* Left variant - content stays within image */
    &.bi-stage-base--left {
      .bi-card__content {
        margin-top: 32px; /* Small offset from top */
        width: 100%;

        .bi-card {
          width: var(--bi-width-stage-content);
          padding: 24px;
        }
      }
    }

    /* Right variant */
    &.bi-stage-base--right {
      .bi-card__content {
        margin-top: 32px; /* Small offset from top */
        width: 100%;

        .bi-card {
          margin-left: auto;
          max-width: var(--bi-width-stage-content);
          padding: 32px;
        }
      }
    }

    /* Image-only variant */
    &.bi-stage-base--image-only {
      min-height: 0;

      .bi-card__image {
        position: relative;
        height: var(--bi-stage-base-image-height-desktop);
      }
    }
  }

  .bi-stage-base {
    .bi-card__img {
      width: 100%;
      height: 100%;
    }

    .bi-image-wrapper {
      height: var(--bi-stage-base-image-height-desktop);
      width: 100%;
    }

     .bi-card__img.bi-card__img__top_left {
       object-position: top left;
     }

     .bi-card__img.bi-card__img__top_center {
       object-position: top center;
     }

     .bi-card__img.bi-card__img__top_right {
       object-position: top right;
     }

     .bi-card__img.bi-card__img__center_left {
       object-position: center left;
     }

     .bi-card__img.bi-card__img__center {
       object-position: center center;
     }

     .bi-card__img.bi-card__img__center_right {
       object-position: center right;
     }

     .bi-card__img.bi-card__img__bottom_left {
       object-position: bottom left;
     }

     .bi-card__img.bi-card__img__bottom_center {
       object-position: bottom center;
     }

     .bi-card__img.bi-card__img__bottom_right {
       object-position: bottom right;
     }
  }
}
/* TabItems component - Container for multiple tabs */
.bi-tab-items {
  /* position */
  position: relative;
  /* spacing */
  padding: 40px 24px;

  .bi-section-base & {
    padding-left: 0;
    padding-right: 0;
  }

  /* Tab list container */
  .bi-tab-items__list {
    /* layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* position */
    position: relative;
    gap: 0;
    /* overflow */
    overflow: visible;
  }

  /* Panels container */
  .bi-tab-items__panels {
    /* spacing */
    padding: 0;
    max-width: calc(100vw - 4px);

    & .bi-content-slider {
      /* spacing */
      padding-top: 0;
    }

    /* Push first row down so badge (top: -32px) fits inside viewport overflow clip */
    /* & .bi-content-slider__track {
      padding-top: 24px;
    } */
  }

  /* Individual panel - hidden by default */
  .bi-tab-items__panel {
    /* layout */
    display: none;
  }

  /* Panel inner container */
  .bi-tab-items__panel-inner {
    /* dimensions */
    width: 100%;

    .bi-content-slider {
      padding: 0;
    }
  }

  /* Remove padding-top when ContentSliderOverflowBase is used */
  .bi-tab-items__panel-inner:has(.bi-content-slider-overflow) {
    /* spacing */
    padding-top: 0;
  }

  /* ContentSliderOverflowBase inside TabItems - mobile */
  .bi-content-slider-overflow.bi-content-slider-overflow--no-title {
    padding-top: 0px;
    .bi-content-slider-overflow__viewport {
      /* spacing */
      padding-top: 24px;
    }
  }

  /* When there's no button-wrapper below the slider AND no active pagination,
     don't set viewport bottom spacing — nothing below the cards needs separating */
  .bi-tab-items__panel-inner:not(:has(> .bi-tab-items__button-wrapper)):not(:has(.bi-pagination-module:not(.bi-pagination-module--disabled))) .bi-content-slider__viewport,
  .bi-tab-items__panel-inner:not(:has(> .bi-tab-items__button-wrapper)):not(:has(.bi-pagination-module:not(.bi-pagination-module--disabled))) .bi-content-slider-overflow__viewport {
    padding-bottom: 0;
  }

  /* Button wrapper */
  .bi-tab-items__button-wrapper {
    /* layout */
    display: flex;
    justify-content: center;
    /* spacing */
    padding-top: 24px;

    .bi-button.bi-button--secondary {
      /* spacing */
      padding: 0;
    }
  }

  /* Only the active panel is visible */
  .bi-tab-items__panel--active {
    /* layout */
    display: block;
  }
}
@media (min-width: 1200px) {
  .bi-tab-items {
    /* spacing */
    padding: 55px 0;

    .bi-tab-items__list {
      /* layout */
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: center;
      flex-wrap: nowrap;
      /* overflow */
      overflow: hidden;
    }

    .bi-tab-items__list .bi-tab {
      /* typography */
      white-space: nowrap;
    }

    .bi-tab-items__panels {
      /* spacing */
      padding: 0;
    }

    .bi-tab-items__panel-inner {
      /* dimensions */
      width: 100%;
      max-width: 1120px;
      /* spacing */
      padding-top: 40px;
      margin: 0 auto;
    }

    /* Remove padding-top when ContentSliderOverflowBase is used */
    .bi-tab-items__panel-inner:has(.bi-content-slider-overflow) {
      /* spacing */
      padding-top: 0;
    }

    .bi-content-slider-overflow.bi-content-slider-overflow--no-title {
      padding-top: 0px;
      .bi-content-slider-overflow__viewport {
        padding-top: 40px;
      }
    }

    /* When there's no button-wrapper below the slider AND no active pagination,
       don't set viewport bottom spacing — nothing below the cards needs separating */
    .bi-tab-items__panel-inner:not(:has(> .bi-tab-items__button-wrapper)):not(:has(.bi-pagination-module:not(.bi-pagination-module--disabled))) .bi-content-slider__viewport,
    .bi-tab-items__panel-inner:not(:has(> .bi-tab-items__button-wrapper)):not(:has(.bi-pagination-module:not(.bi-pagination-module--disabled))) .bi-content-slider-overflow__viewport {
      padding-bottom: 0;
    }

    .bi-content-slider {
      padding: 0;

      & .bi-content-slider__viewport {
        padding-top: 0;
        padding-bottom: 0px;
      }
    }

    .bi-tab-items__button-wrapper {
      /* layout */
      display: flex;
      justify-content: flex-end;
      /* dimensions */
      max-width: 1120px;
      /* spacing */
      padding-top: 36px;
      margin: 0 auto;

      &.bi-button.bi-button--secondary {
        /* spacing */
        padding: 0 4px;
      }
    }
  }
}
/* TeaserAnnouncement component styles */
.bi-card--teaser-announcement {
  /* layout */
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;

  /* Badge – hidden by default */
  .bi-badge {
    display: none;
    position: absolute;
    top: -8px;
    right: 22px;
    z-index: 1;
  }

  /* Badge – visible when parent has --with-badge modifier */
  &.bi-card--with-badge .bi-badge {
    display: flex;
  }

  /* Content container */
  .bi-card__content {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
  }

  /* Headline */
  .bi-card__headline {
    /* typography */
    font-family: var(--bi-font-family-headline);
    font-size: var(--bi-font-size-lg);
    color: var(--bi-color-text-secondary);
  }

  /* Headline link */
  .bi-card__headline-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      color: var(--bi-color-brand-secondary-hover);
    }

    &:active {
      color: var(--bi-color-brand-secondary-active);
    }

    &:focus-visible {
      outline: 2px solid var(--bi-color-focus);
      outline-offset: 2px;
    }
  }

  /* Description */
  .bi-card__description {
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-regular);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
  }
}
@media (min-width: 1200px) {
  .bi-card--teaser-announcement {
    &.bi-card--with-badge .bi-badge {
      top: -14px;
      right: 11px;
    }
  }
}
/* TeaserArticleSection wrapper */
.bi-teaser-article-section {
  /* layout */
  display: flex;
  justify-content: center;
  /* dimensions */
  width: 100%;
}
/* TeaserArticle component styles */
.bi-teaser-article {
  /* layout */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* dimensions */
  width: 100%;
  /* background */
  background-color: transparent;

  /* Header */
  .bi-teaser-article__header {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  /* Header category and badge */

  .bi-teaser-article__link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      color: var(--bi-color-brand-secondary-hover);
    }

    &:active {
      color: var(--bi-color-brand-secondary-active);
    }

    &:focus-visible {
      outline: 2px solid var(--bi-color-focus);
      outline-offset: 2px;
    }
  }

  .bi-teaser-article__header-info {
    /* layout */
    display: flex;
    align-items: flex-start;
  }

  /* Category */
  .bi-teaser-article__category {
    /* typography */
    font-size: var(--bi-font-size-sm);
    font-weight: var(--bi-font-weight-semibold);
    letter-spacing: 1.28px;
    /* color - using darker shade for WCAG compliance + the design color is too light and not in the color palette*/
    color: var(--bi-color-brand-primary-700);
  }

  /* Badge is hidden by default */
  .bi-badge {
    display: none;
    /* Badge positioning - sticks out of the top-right corner */
    position: absolute;
    top: -13px;
    right: 6px;
    z-index: 1;
  }

  /* Badge is visible when parent has --with-badge modifier */
  &.bi-teaser-article--with-badge .bi-badge {
    display: flex;

    .bi-badge__image {
      width: 47px;
    }
  }

  /* Content */
  .bi-teaser-article__content {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Title */
  .bi-teaser-article__title {
    /* reset */
    margin: 0;
  }

  /* Description */
  .bi-teaser-article__description {
    /* reset */
    margin: 0;
    /* typography */
    word-break: break-word;
    hyphens: auto;
  }

  /* Tags container */
  .bi-teaser-article__tags {
    /* layout */
    display: flex;
    flex-wrap: wrap;
    gap: 15px;

    .bi-chip {
      /* typography */
      font-size: var(--bi-font-size-xs);
      line-height: var(--bi-line-height-tight-small);
      letter-spacing: var(--bi-letter-spacing-relaxed);
    }
  }
}
/* Secondary background – switch title and link to light color */
.bi-container-secondary .bi-teaser-article__title {
  color: var(--bi-color-brand-tertiary-200);
}
.bi-container-secondary .bi-teaser-article__link {
  color: var(--bi-color-brand-tertiary-200);

  &:hover {
    color: var(--bi-color-brand-tertiary-500);
  }

  &:active {
    color: var(--bi-color-brand-tertiary-500);
  }
}
/* Responsive adjustments */
@media (min-width: 1200px) {
  /* When nested inside another section, restore the desktop top padding so the
     article hero keeps its breathing room above. (0,3,0) beats the (0,2,0)
     nested-zero rule in sectionBase.css. */
  .bi-section-base .bi-teaser-article-section.bi-section-base,
  .bi-section-base .bi-teaser-product-big-section.bi-section-base {
    padding-top: 80px;
  }

  .bi-teaser-article {
    max-width: var(--bi-max-width-desktop);
  }

  .bi-teaser-article--with-badge .bi-badge {
    right: 28px;
    top: -10px;
  }
}
/* TeaserCard component – Card with headline, description, categories and optional badge */
.bi-card--teaser-card {
  /* layout */
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;

  /* Badge – hidden by default */
  .bi-badge {
    /* layout */
    display: none;
    position: absolute;
    top: -8px;
    /* -16px offsets the card's mobile padding-right (16px) to reach the card edge */
    right: 22px;
    z-index: 1;
  }

  /* Badge – visible when parent has --with-badge modifier */
  &.bi-card--with-badge .bi-badge {
    display: flex;
  }

  /* Content container */
  .bi-card__content {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
  }

  /* Headline */
  .bi-card__headline {
    /* typography */
    font-family: var(--bi-font-family-headline);
    font-size: var(--bi-font-size-lg);
    color: var(--bi-color-text-secondary);
    /* Allow flex/grid children to shrink so long words wrap (word-break comes from global h1–h6 rules) */
    min-width: 0;
  }

  /* Headline link */
  .bi-card__headline-link {
    /* typography */
    color: inherit;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      color: var(--bi-color-brand-secondary-hover);
    }

    &:active {
      color: var(--bi-color-brand-secondary-active);
    }

    &:focus-visible {
      outline: 2px solid var(--bi-color-focus);
      outline-offset: 2px;
    }
  }

  /* Description text */
  .bi-card__description {
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-regular);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
  }

  /* customContent utility classes ----------------------------------------- */

  /* Bold-weight copy block */
  .bi-card-description--bold {
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-semibold);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
  }

  /* Standalone text link – extends bi-button--secondary; only adds underline decoration */
  .bi-card-link {
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-word;
  }

  /* Categories wrapper */
  .bi-card__chips {
    /* layout */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}
/* Responsive adjustments */
@media (min-width: 1200px) {
  .bi-card--teaser-card {
    /* Badge – -24px offsets the card's desktop padding-right (24px) to reach the card edge */
    &.bi-card--with-badge .bi-badge {
      top: -14px;
      right: 11px;
    }

    .bi-card__headline {
      /* typography */
      font-size: var(--bi-font-size-xl);
    }
  }
}
/* TeaserCardIcon component styles */
.bi-card--teaser-card-icon {
  /* layout */
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;

  /* Badge – hidden by default */
  .bi-badge {
    display: none;
    position: absolute;
    top: -8px;
    right: 22px;
    z-index: 1;
  }

  /* Badge – visible when parent has --with-badge modifier */
  &.bi-card--with-badge .bi-badge {
    display: flex;
  }

  /* Content container */
  .bi-card__content {
    /* layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    height: 100%;
    /* text alignment */
    text-align: center;
  }

  /* Icon container */
  .bi-card__icon {
    /* layout */
    display: flex;
    align-items: center;
    justify-content: center;
    /* dimensions */
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
    flex-shrink: 0;

    /* Custom icon font – fill container and center glyph */
    .bi-custom-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 80px;
      line-height: 0;
      fill: currentColor;
      stroke: currentColor;
    }
  }

  /* Headline */
  .bi-card__headline {
    /* reset */
    margin: 0;
    /* typography */
    font-family: var(--bi-font-family-headline);
    font-size: var(--bi-font-size-xl);
    /* color */
    color: var(--bi-color-text-secondary);
    /* Allow flex/grid children to shrink (word-break for h3 comes from global heading rules) */
    min-width: 0;
  }

  /* Description */
  .bi-card__description {
    /* reset */
    margin: 0;
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-regular);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    /* color */
    color: var(--bi-color-text-dark-grey);
    word-break: break-word;
    hyphens: auto;
  }

  /* Bold-weight copy block (customContent utility) */
  .bi-card-description--bold {
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-semibold);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
  }

  /* Push the button (last child) to the bottom */
  .bi-button {
    margin-top: auto;
  }
}
@media (min-width: 1200px) {
  .bi-card--teaser-card-icon {
    &.bi-card--with-badge .bi-badge {
      right: 11px;
      top: -15px;
    }
  }
}
/* TeaserContactAccordion component styles */
.bi-card--teaser-contact-accordion {
  /* layout */
  position: relative;
  display: flex;
  flex-direction: column;
  /* spacing – overrides card default padding */
  padding: 0;
  padding-bottom: 18px;

  /* push the accordion to the bottom of the card when stretched in a grid (mobile/flex) */
  .bi-accordion {
    margin-top: auto;
  }

  /* Image container – aspect ratio on mobile */
  .bi-card__image-container {
    /* dimensions */
    width: 100%;
    aspect-ratio: 224 / 188;
    /* layout */
    flex-shrink: 0;
    /* overflow */
    overflow: hidden;
  }

  /* Image */
  .bi-card__image {
    /* dimensions */
    width: 100%;
    height: 100%;
    /* layout */
    display: block;
    /* visual */
    object-fit: cover;
    object-position: top center;
  }

  /* Content – headline + description */
  .bi-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-large);
    padding: 10px 12px 0;
  }

  /* Name */
  .bi-card__headline {
    /* reset */
    margin: 0;
    /* typography */
    font-family: var(--bi-font-family-headline);
    font-weight: var(--bi-font-weight-semibold);
    font-size: var(--bi-font-size-md);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-medium);
    color: var(--bi-color-text-secondary);
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Headline link */
  .bi-card__headline-link {
    /* typography */
    color: inherit;
    text-decoration: none;
    overflow-wrap: break-word;
    word-break: break-word;
    /* visual */
    cursor: pointer;

    &:hover {
      color: var(--bi-color-brand-secondary-hover);
    }

    &:active {
      color: var(--bi-color-brand-secondary-active);
    }

    &:focus-visible {
      outline: 2px solid var(--bi-color-focus);
      outline-offset: 2px;
    }
  }

  /* Description */
  .bi-card__description {
    /* reset */
    margin: 0;
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-weight: var(--bi-font-weight-regular);
    font-size: var(--bi-font-copy-s);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
  }

  /* Accordion */
  .bi-accordion {
    /* reset */
    padding: 0;
  }

  .bi-accordion-item__trigger {
    /* spacing */
    padding: 16px 10px 14px 9px;
  }

  .bi-accordion-item__trigger-text {
    /* typography */
    font-size: var(--bi-font-size-sm);
  }

  .bi-accordion-item__description {
    /* spacing */
    padding: 18px 10px 0;
  }
}
/* Desktop layout */
@media (min-width: 768px) {
  .bi-card--teaser-contact-accordion {
    /* layout */
    display: grid;
    grid-template-columns: 1fr 201px;
    /* content row absorbs extra height so trigger sits at the card's bottom edge */
    grid-template-rows: 1fr auto auto;
    align-items: start;
    /* spacing */
    padding: 32px;

    /* Image – grid placement spans content + trigger rows only; height stays constant between closed/open states (no jump) */
    .bi-card__image-container {
      /* layout */
      grid-area: 1 / 2 / 3 / 3;
      justify-self: end;
      /* fill the grid area vertically (parent sets align-items: start, so we opt back in to stretch) */
      align-self: stretch;
      /* dimensions */
      width: 204px;
      aspect-ratio: unset;
      /* extend past card padding so the image touches top, right, and bottom card edges; bottom extension stays at -32 in both states so the image height never jumps */
      margin: -32px -32px -32px 0;
      /* overflow */
      overflow: hidden;
    }

    /* Content – left column, row 1, reserve space for image */
    .bi-card__content {
      /* layout */
      grid-area: 1 / 1 / 2 / 2;
      align-self: start;
      gap: var(--bi-gap-xlarge);
      min-height: 125px;
      /* spacing */
      padding: 0;
    }

    .bi-card__headline {
      /* typography */
      font-size: var(--bi-font-copy-xxl);
    }

    .bi-card__description {
      /* typography */
      font-size: var(--bi-font-copy-m);
    }

    .bi-accordion,
    .bi-accordion-item {
      /* layout */
      display: contents;
    }

    /* Trigger – row 2, left column only */
    .bi-accordion-item__trigger {
      /* layout */
      grid-area: 2 / 1 / 3 / 2;
      /* spacing */
      padding-top: 24px;
      padding-left: 0;
    }

    .bi-accordion-item__trigger-text {
      /* typography */
      font-size: var(--bi-font-size-md);
    }

    /* Content panel – row 3, spans both columns (full card width) */
    .bi-accordion-item__wrapper {
      /* layout */
      grid-area: 3 / 1 / 4 / 3;
    }

    .bi-accordion-item__description {
      /* spacing */
      padding: 55px 4px 0;
    }
  }

  /* No-image: single column, no reserved space */
  .bi-card--teaser-contact-accordion:not(:has(.bi-card__image-container)) {
    grid-template-columns: 1fr;
    /* spacing */
    padding: 32px;
  }
}
@media (min-width: 1200px) {
  .bi-card--teaser-contact-accordion {
    .bi-card__image-container {
      width: 208px;
    }
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bi-card--teaser-contact-accordion .bi-accordion-item__trigger-icon,
  .bi-card--teaser-contact-accordion .bi-accordion-item__wrapper {
    transition: none;
  }
}
/* TeaserContact component */
/* Small – container < 352px */
/* Medium – container 352px–734px */
/* Large – container ≥ 735px */
.bi-card--teaser-contact {
  /* layout */
  container-type: inline-size;
  container-name: teaser-contact;
  position: relative;
  display: flex;
  flex-direction: column;
  /* dimensions */
  height: 100%;
  /* spacing */
  padding: 0;
  /* overflow */
  overflow: hidden;

  /* Transparent variant */
  &.bi-card--transparent {
    background-color: transparent;
    border-color: transparent;
  }

  /* Badge – hidden by default */
  .bi-badge {
    /* layout */
    display: none;
    /* position */
    position: absolute;
    top: -8px;
    right: 13px;
    z-index: 1;
  }

  /* Badge – visible */
  &.bi-card--with-badge {
    /* overflow */
    overflow: visible;

    .bi-badge {
      /* layout */
      display: flex;
    }
  }

  /* Image container */
  .bi-card__image-container {
    /* dimensions */
    width: 100%;
    aspect-ratio: 160 / 187.5;
    /* layout */
    flex-shrink: 0;
    /* overflow */
    overflow: hidden;
  }

  /* Image */
  .bi-card__image {
    /* dimensions */
    width: 100%;
    height: 100%;
    /* layout */
    display: block;
    /* visual */
    object-fit: cover;
    object-position: top center;
  }

  /* Body */
  .bi-card__body {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* spacing */
    padding: 10px;
  }

  /* Headline — 18px in Small (< 352px); Medium/Large bump to 24px below.
     Larger container sizes still bump the font-family/line-height/letter-spacing below. */
  .bi-card__headline {
    /* spacing */
    margin: 0;
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-semibold);
    font-size: var(--bi-font-headline-m);
    line-height: 22px;
    letter-spacing: var(--bi-letter-spacing-normal);
    color: var(--bi-color-text-secondary);
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Headline link */
  .bi-card__headline-link {
    /* typography */
    color: inherit;
    text-decoration: none;
    overflow-wrap: break-word;
    word-break: break-word;
    /* visual */
    cursor: pointer;

    &:hover {
      color: var(--bi-color-brand-secondary-hover);
    }

    &:active {
      color: var(--bi-color-brand-secondary-active);
    }

    &:focus-visible {
      outline: 2px solid var(--bi-color-focus);
      outline-offset: 2px;
    }
  }

  /* Description */
  .bi-card__description {
    /* spacing */
    margin: 0;
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-regular);
    font-size: var(--bi-font-copy-s);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
  }

  /* Description bold modifier */
  .bi-card__description--bold {
    /* typography */
    font-weight: var(--bi-font-weight-semibold);
  }

  /* Communication rows */
  .bi-card__communication {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .bi-card__phone,
  .bi-card__email {
    /* layout */
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Icon */
  .bi-card__icon {
    /* typography */
    font-size: 24px;
    color: var(--bi-color-brand-primary);
  }

  /* Link */
  .bi-card__link {
    /* typography */
    text-decoration: none;
    font-size: 16px;
    font-weight: var(--bi-font-weight-semibold);
    color: var(--bi-color-text-black);

    &:focus-visible {
      outline: 2px solid var(--bi-color-focus);
      outline-offset: 2px;
    }
  }

  /* Email link modifier */
  .bi-card__link--email {
    /* typography */
    color: var(--bi-color-brand-primary);
    text-decoration: underline;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Address block */
  .bi-card__address {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
}
/* Medium – container 352px–734px */
@container teaser-contact (min-width: 352px) {
  .bi-card--teaser-contact {
    .bi-badge {
      /* position */
      top: -14px;
      right: 11px;
    }

    .bi-card__body {
      /* layout */
      gap: 16px;
      /* spacing */
      padding: 20px 16px;
    }

    &.bi-card--has-image .bi-card__body {
      /* spacing */
      padding-right: calc(105px + 16px);
    }

    .bi-card__headline {
      /* typography */
      font-family: var(--bi-font-family-headline);
      font-size: var(--bi-font-size-xxl-mobile);
      line-height: var(--bi-line-height-tight);
      letter-spacing: var(--bi-letter-spacing-medium);
    }

    .bi-card__communication {
      /* layout */
      gap: 12px;
    }

    .bi-card__image-container {
      /* position */
      position: absolute;
      right: 0;
      bottom: 0;
      top: auto;
      /* dimensions */
      width: 105px;
      aspect-ratio: 105 / 123.38;
      /* overflow */
      overflow: hidden;
    }
  }
}
/* Large – container ≥ 735px */
@container teaser-contact (min-width: 735px) {
  .bi-card--teaser-contact {
    .bi-card__body {
      /* layout */
      gap: 24px;
      /* spacing */
      padding: 32px;
    }

    &.bi-card--has-image .bi-card__body {
      /* spacing */
      padding-right: calc(230px + 32px);
    }

    .bi-card__image-container {
      /* position */
      top: 0;
      bottom: 0;
      /* dimensions */
      width: 230px;
      aspect-ratio: unset;
    }

    &.bi-card--with-badge .bi-badge {
      /* position */
      right: 9px;
      top: -14px;
    }
  }
}
@media (min-width: 783px) {
  .bi-card--teaser-contact.bi-card--has-image {
      min-height: 375px;
  }
}
/* TeaserEvent component styles */
.bi-card--teaser-event {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;

  /* Badge – hidden by default */
  .bi-badge {
    display: none;
    position: absolute;
    top: -8px;
    right: 21px;
    z-index: var(--bi-z-index-stage-content);
  }

  /* Badge visible when Card has --with-badge modifier */
  &.bi-card--with-badge .bi-badge {
    display: flex;
  }

  /* Content */
  .bi-card__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Headline */
  .bi-card__headline {
    font-family: var(--bi-font-family-headline);
    font-size: var(--bi-font-size-lg);
    color: var(--bi-color-text-secondary);
    margin: 0;
  }

  .bi-card__headline-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      color: var(--bi-color-brand-secondary-hover);
    }

    &:active {
      color: var(--bi-color-brand-secondary-active);
    }

    &:focus-visible {
      outline: 2px solid var(--bi-color-focus);
      outline-offset: 2px;
    }
  }

  /* Categories wrapper */
  .bi-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Date */
  .bi-card__description--small {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    color: var(--bi-color-text-black);

    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-semibold);
    font-size: var(--bi-font-size-md);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
  }

  /* Description with icon */
  .bi-card__description--icon {
    display: flex;
    align-items: center;
    gap: 8px;

    .bi-custom-icon {
      flex-shrink: 0;
      display: inline-block;
      vertical-align: middle;
      font-size: 24px;
      color: var(--bi-color-brand-primary);
    }
  }

  /* customContent utility classes ----------------------------------------- */
  .bi-card-description--bold {
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-semibold);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
  }
}
/* Responsive adjustments */
@media (min-width: 1200px) {
  .bi-card--teaser-event {
    &.bi-card--with-badge .bi-badge {
      right: 11px;
      top: -14px;
    }

    .bi-card__headline {
      font-size: var(--bi-font-size-xl);
    }
  }
}
/* TeaserJobOffer component styles */
.bi-card--teaser-job-offer {
  /* layout (Card content is already padded by .bi-card) */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;

  /* Card background variant: tertiary (light purple) */
  &.bi-card--teaser-job-offer--bg-tertiary {
    background-color: var(--bi-color-brand-tertiary);
  }

  /* Badge – hidden by default */
  .bi-badge {
    display: none;
    position: absolute;
    top: -8px;
    right: 22px;
    z-index: var(--bi-z-index-stage-content);
  }

  /* Badge visible when Card has --with-badge modifier */
  &.bi-card--with-badge .bi-badge {
    display: flex;
  }

  /* Content */
  .bi-card__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
  }

  /* Title */
  .bi-card__headline {
    font-family: var(--bi-font-family-headline);
    font-size: var(--bi-font-size-lg);
    color: var(--bi-color-text-secondary);
    margin: 0;
  }

  .bi-card__headline-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      color: var(--bi-color-brand-secondary-hover);
    }

    &:active {
      color: var(--bi-color-brand-secondary-active);
    }

    &:focus-visible {
      outline: 2px solid var(--bi-color-focus);
      outline-offset: 2px;
    }
  }

  /* Employer */
  .bi-card__description {
    margin: 0;
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-regular);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  /* Description with icon */
  .bi-card__description--icon {
    display: flex;
    align-items: center;
    gap: 4px;

    .bi-card__icon {
      font-size: 20px;
      color: var(--bi-color-brand-primary);
      flex-shrink: 0;
    }

    .bi-card__description--icon-text {
      font-family: var(--bi-font-family-primary);
      font-style: normal;
      font-weight: var(--bi-font-weight-regular);
      font-size: var(--bi-font-copy-m);
      line-height: var(--bi-line-height-tight);
      letter-spacing: var(--bi-letter-spacing-normal);
      word-break: break-word;
      hyphens: auto;
      overflow-wrap: anywhere;
    }
  }

  /* customContent utility classes ----------------------------------------- */
  .bi-card-description--bold {
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-semibold);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
  }
}
@media (min-width: 1200px) {
  .bi-card--teaser-job-offer {
    &.bi-card--with-badge .bi-badge {
      right: 11px;
      top: -14px;
    }
  }
}
/* TeaserProductBig component styles */
/* Background comes from the atom-level rules in card.css:
   - default: `var(--bi-color-container-white)` (white)
   - inside `.bi-container-grey` / `.bi-container-white`: `var(--bi-color-surface)` (white)
   so the card stays white on a grey section. */
.bi-card--teaser-product-big {
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  /* dimensions */
  height: 100%;

  /* spacing (Card is no-padding for this component) */
  padding: 16px 16px 24px 16px;

  /* Image container */
  .bi-card__image-container {
    position: relative;
    max-height: 544px;
    overflow: visible;

    .bi-badge {
      display: none;
      position: absolute;
      top: -10px;
      right: 9px;
      z-index: var(--bi-z-index-stage-content);

      .bi-badge__image {
        width: 35px;
      }
    }
  }

  &.bi-card--with-badge .bi-card__image-container .bi-badge {
    display: block;
  }

  /* Picture element */
  .bi-card__picture {
    width: 100%;
    display: block;
  }

  /* Product image */
  .bi-card__image {
    width: 100%;
    height: 100%;
    max-height: 544px;
    display: block;
    object-fit: contain;
    object-position: top;
  }

  /* Content */
  .bi-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    /* Fill remaining card height so the button auto-margin can pin to bottom */
    flex: 1;
  }

  /* Title */
  .bi-card__headline {
    text-align: start;
    font-size: var(--bi-font-size-lg);
    font-family: var(--bi-font-family-headline);
    color: var(--bi-color-text-secondary);
    margin: 0;
  }

  /* Source */
  .bi-card__source {
    margin: 0;
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-semibold);
    font-size: var(--bi-font-size-sm);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    color: var(--bi-color-brand-primary-750);
  }

  /* Button container — auto top margin pins to bottom of .bi-card__content */
  .bi-card__button {
    width: fit-content;
    margin-top: auto;
    padding-top: 20px;

    .bi-button--secondary {
      padding: 0;
      min-height: unset;
    }
  }

  /* customContent utility classes ----------------------------------------- */
  .bi-card-description--bold {
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-semibold);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
  }
}
/* Responsive adjustments */
@media (min-width: 1200px) {
  .bi-card--teaser-product-big {
    flex-direction: row;
    width: 100%;
    gap: 40px;
    padding: 24px;
    align-items: flex-start;
    max-width: 544px;

    .bi-card__image-container {
      width: unset;
      align-self: flex-start;

      .bi-badge {
        right: 8px;

        .bi-badge__image {
          width: 38px;
        }
      }
    }

    .bi-card__picture {
      aspect-ratio: 133/200;
      width: 133px;
    }

    .bi-card__image {
      aspect-ratio: 133/200;
      width: 100%;
      border-radius: 0;
    }

    .bi-card__content {
      justify-content: space-between;
      align-self: stretch;
      flex: 1;
      gap: 16px;
    }

    .bi-card__button {
      margin-top: auto;
      margin-bottom: 12px;
      padding-top: 0;

      .bi-button--secondary {
        padding: 0;
        min-height: unset;
      }
    }

    .bi-content-slider-overflow--columns-4 &,
    .bi-section-base--grid-2 &,
    .bi-section-base--grid-3 &,
    .bi-section-base--grid-4 & {
      flex-direction: column;
      gap: 24px;
      padding: 16px 16px 24px 16px;
      align-items: center;
      max-width: none;

      .bi-card__image-container {
        width: 100%;
        max-width: 310px;
      }

      .bi-card__picture {
        aspect-ratio: 155/233;
        width: 100%;
      }

      .bi-card__content {
        align-self: auto;
        flex: 1;
        gap: 8px;
      }

      .bi-card__button {
        margin-top: auto;
        padding-top: 20px;
        margin-bottom: 0;
      }
    }
  }
}
/* TeaserProductSmall component styles */
.bi-card--teaser-product-small {
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  position: relative;

  background-color: var(--bi-color-container-grey);

  .bi-badge {
    display: none;
    position: absolute;
    top: -8px;
    right: 22px;
    z-index: var(--bi-z-index-stage-content);
  }

  &.bi-card--with-badge .bi-badge {
    display: flex;
  }

  /* Image container */
  .bi-card__image-container {
    width: 100%;
    max-width: 310px;
    overflow: hidden;
    border-radius: 24px;
  }

  /* Picture element */
  .bi-card__picture {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Product image */
  .bi-card__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  /* Content */
  .bi-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  /* Title */
  .bi-card__headline {
    text-align: start;
    font-family: var(--bi-font-family-headline);
    font-size: var(--bi-font-size-lg);
    color: var(--bi-color-text-secondary);
    margin: 0;
  }

  /* Date description (label + value) */
  .bi-card__description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--bi-color-text-dark-grey);

    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-regular);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    hyphens: auto;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Action container */
  .bi-card__action {
    margin-top: 8px;
    width: fit-content;

    .bi-button--secondary {
      padding: 0;
      min-height: unset;
    }
  }

  /* customContent utility classes */
  .bi-card-description--bold {
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-semibold);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
    /* align-self: flex-end; */
    /* width: 100%; */
    text-align: left;
  }
}
/* Responsive adjustments */
@media (min-width: 1200px) {
  .bi-card--teaser-product-small {
    max-width: 265px;

    .bi-section-base--grid-2 &,
    .bi-section-base--grid-3 &,
    .bi-section-base--grid-4 & {
      max-width: none;
    }

    &.bi-card--with-badge .bi-badge {
      right: 10px;
      top: -15px;
    }
  }
}
/* TeaserSmall component styles */
.bi-card--teaser-small {
  width: 100%;
  max-width: none;

  /* layout */
  display: flex;
  flex-direction: column;
  padding: 16px 16px 24px;
  position: relative;

  /* Badge – hidden by default */
  .bi-badge {
    display: none;
    position: absolute;
    top: -8px;
    right: 22px;
    z-index: var(--bi-z-index-stage-content);
  }

  /* Badge visible when Card has --with-badge modifier */
  &.bi-card--with-badge .bi-badge {
    display: flex;
  }

  /* Headline */
  .bi-card__headline {
    font-family: var(--bi-font-family-headline);
    font-size: var(--bi-font-size-lg);
    color: var(--bi-color-text-secondary);
    margin: 0;
  }

  /* Action container */
  .bi-card__action {
    width: fit-content;
    margin-top: 20px;
  }

  /* customContent utility classes ----------------------------------------- */
  /* Bold-weight copy block */
  .bi-card-description--bold {
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-semibold);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
  }
}
@media (min-width: 1200px) {
  .bi-card--teaser-small.bi-card--with-badge .bi-badge {
    right: 11px;
    top: -14px;
  }
}
/* TeaserTextVideo component styles */
.bi-card--teaser-text-video {
  /* layout */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* dimensions */
  /* Allow full width inside parent containers */
  max-width: none;
  width: 100%;
  /* spacing */
  gap: 32px;
  overflow: visible;
  /* remove default card padding and background to match the original component layout */
  padding: 0;
  background-color: transparent;
}
/* Keep transparent in all container contexts */
.bi-container-white .bi-card--teaser-text-video,
.bi-container-grey .bi-card--teaser-text-video {
  background-color: transparent;
}
.bi-card--teaser-text-video {
  /* Image link wrapper — whole image acts as the click target. */
  .bi-card__image-link {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
  }

  .bi-card__image-link:focus-visible {
    outline: 2px solid var(--bi-color-focus);
    outline-offset: 2px;
  }

  /* Image container */
  .bi-card__image-container {
    position: relative;
    width: 100%;
    max-width: none;
    overflow: visible;

    /* Badge on image – hidden by default */
    .bi-badge {
      display: none;
      position: absolute;
      top: -12px;
      right: 16px;
      z-index: var(--bi-z-index-stage-content);
    }
  }

  /* Show badge on image when --with-badge modifier */
  &.bi-card--with-badge .bi-card__image-container .bi-badge {
    display: flex;
  }

  /* Badge in content – hidden on mobile */
  .bi-card__content > .bi-badge {
    display: none;
    position: static;
  }

  /* Badge size – keep small in this component */
  .bi-badge__image {
    width: 41px;
  }

  /* Picture element */
  .bi-card__picture {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
  }

  /* Image */
  .bi-card__image {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
    box-shadow: var(--bi-elevation-big);
  }

  /* Play button */
  .bi-card__play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background-color: var(--bi-color-button-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: background-color 0.2s ease;

    &:hover {
      background-color: var(--bi-color-button-primary-hover);
    }

    &:active {
      background-color: var(--bi-color-button-primary-active);
    }
  }

  .bi-card__play-button-icon {
    font-size: 38px;
    color: var(--bi-color-icon-white);
    margin-left: 6px;
  }

  /* Content */
  .bi-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;


    .bi-card__actions {
      display: flex;
      width: 100%;
      justify-content: end;
    }
  }

  /* Highlight ribbon label rendered above the headline (e.g. 'PODCAST HIGHLIGHT'). */
  .bi-card__highlight-label {
    font-family: var(--bi-font-family-headline);
    font-size: var(--bi-font-copy-s);
    font-weight: var(--bi-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bi-color-brand-secondary);
  }

  /* Headline */
  .bi-card__headline {
    font-family: var(--bi-font-family-headline);
    font-size: var(--bi-font-size-lg);
    color: var(--bi-color-text-secondary);
    margin: 0;
    word-break: break-word;
    hyphens: auto;
  }

  /* Reserve right-side space on the headline so a long title cannot overlap
     the IDW Plus badge floating in the content area's top-right. */
  &.bi-card--with-badge .bi-card__headline {
    padding-right: 90px;
  }

  /* Push the content block down a bit so the floating badge has visual breathing
     room above the headline. */
  &.bi-card--with-badge .bi-card__content {
    padding-top: 8px;
  }

  /* Headline link */
  .bi-card__headline-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      color: var(--bi-color-brand-secondary-hover);
    }

    &:active {
      color: var(--bi-color-brand-secondary-active);
    }

    &:focus-visible {
      outline: 2px solid var(--bi-color-focus);
      outline-offset: 2px;
    }
  }

  /* Description */
  .bi-card__description {
    word-break: break-word;
    hyphens: auto;
    overflow-wrap: anywhere;

    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-regular);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
  }

  /* Category / date line */
  .bi-card__description--small {
    color: var(--bi-color-text-black);
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-regular);
    font-size: var(--bi-font-copy-s);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  /* customContent utility classes ----------------------------------------- */
  .bi-card-description--bold {
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-semibold);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
  }
}
/* Secondary background (dark container) - switch all text to white and
   give the content block right padding so the text does not run into the
   container edge. */
.bi-container-secondary .bi-card--teaser-text-video {
  color: var(--bi-color-text-white);
}
.bi-container-secondary .bi-card--teaser-text-video .bi-card__content {
  padding-right: 24px;
}
.bi-container-secondary .bi-card--teaser-text-video .bi-card__headline,
.bi-container-secondary
  .bi-card--teaser-text-video
  .bi-card__description--small,
.bi-container-secondary
  .bi-card--teaser-text-video
  .bi-card__highlight-label {
  color: var(--bi-color-text-white);
}
.bi-container-secondary
  .bi-card--teaser-text-video
  .bi-card__headline-link:hover,
.bi-container-secondary
  .bi-card--teaser-text-video
  .bi-card__headline-link:active {
  color: var(--bi-color-text-white);
}
/* Desktop layout */
@media (min-width: 1200px) {
  .bi-card--teaser-text-video {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    max-width: none;
    width: 100%;

    &.bi-card--teaser-text-video--videoRight {
      flex-direction: row-reverse;
    }
  }

  /* videoLeft: badge above headline (in content), hide badge on image */
  .bi-card--teaser-text-video--videoLeft.bi-card--with-badge
    .bi-card__image-container
    .bi-badge {
    display: none;
  }

  .bi-card--teaser-text-video--videoLeft.bi-card--with-badge
    .bi-card__content
    > .bi-badge {
    display: flex;
    position: absolute;
    top: -11px;
    right: 42px;
    z-index: var(--bi-z-index-stage-content);
  }

  /* videoRight: badge on image, adjusted position */
  .bi-card--teaser-text-video--videoRight.bi-card--with-badge
    .bi-card__image-container
    .bi-badge {
    top: -11px;
    right: 42px;
  }

  .bi-card--teaser-text-video .bi-card__content {
    position: relative;
    width: 100%;
  }
}
/* EmbedVideo component styles */
.bi-embed-video {
  display: flex;
  flex-direction: column;
  gap: var(--bi-gap-medium);
  margin: 0;
  position: relative;
  width: 100%;

  & .bi-badge {
    position: absolute;
    z-index: 1;
    top: -11px;
    right: 42px;
  }
}
/* Aspect-ratio frame using the padding-top hack so layout is robust across
   container types (storybook autodocs, CMS templates) where intrinsic
   `aspect-ratio` heights can collapse. */
.bi-embed-video__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--bi-color-container-grey);
  box-shadow: var(--bi-elevation-big);
}
.bi-embed-video__media::before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 56.25%; /* 16:9 default */
}
.bi-embed-video--4-3 .bi-embed-video__media::before {
  padding-top: 75%;
}
.bi-embed-video--1-1 .bi-embed-video__media::before {
  padding-top: 100%;
}
.bi-embed-video--9-16 .bi-embed-video__media::before {
  padding-top: 177.7778%;
}
.bi-embed-video--9-16 .bi-embed-video__media {
  max-width: 360px;
  margin-inline: auto;
}
.bi-embed-video__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  /* place-content centers the auto-sized grid track vertically + horizontally
     in the placeholder; place-items then centers the play button within the
     track. Without place-content, the auto row sticks to the top. */
  place-content: center;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.bi-embed-video__placeholder:focus-visible {
  outline: 2px solid var(--bi-color-focus);
  outline-offset: 2px;
}
/* Transparent wrapper — keeps the absolutely-positioned <img> anchored to the
   placeholder, not to the picture element. */
.bi-embed-video__picture {
  display: contents;
}
.bi-embed-video__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bi-embed-video__play-button {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  width: 70px;
  height: 70px;
  background-color: var(--bi-color-button-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}
.bi-embed-video__placeholder:hover .bi-embed-video__play-button {
  background-color: var(--bi-color-button-primary-hover);
}
.bi-embed-video__placeholder:active .bi-embed-video__play-button {
  background-color: var(--bi-color-button-primary-active);
}
.bi-embed-video__play-icon {
  font-size: 38px;
  color: var(--bi-color-icon-white);
  margin-left: 6px; /* optical centering for the play triangle */
}
/* Plyr-injected element fills the frame */
.bi-embed-video__media > .plyr,
.bi-embed-video__media > iframe,
.bi-embed-video__media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Plyr theme — recolor accents to match the IDW play button so the visual
   handoff between our placeholder and the mounted player is consistent. */
.bi-embed-video .plyr {
  --plyr-color-main: var(--bi-color-button-primary);
  --plyr-video-control-color-hover: var(--bi-color-text-white);
  --plyr-video-control-background-hover: var(--bi-color-button-primary);
}
/* Match Plyr's overlaid pause-state play button to the placeholder play button
   (70px circle, 38px icon). We keep Plyr's padding-based sizing rather than
   forcing width/height + flex — Plyr's own selector
   `.plyr--full-ui.plyr--video .plyr__control--overlaid` outranks our scope and
   sets `display: inline-block`, which would shove the SVG into the corner. */
.bi-embed-video .plyr__control--overlaid {
  padding: 16px;
}
.bi-embed-video .plyr__control--overlaid svg {
  width: 38px;
  height: 38px;
}
/* Error state — pre-rendered, hidden by default. CMS toggles visibility either
   by removing the [hidden] attribute on the error block, or by adding the
   modifier `bi-embed-video--has-error` to the root, which both shows the error
   block and hides the media area. */
.bi-embed-video__error {
  display: flex;
  align-items: flex-start;
  gap: var(--bi-gap-small);
  padding: var(--bi-padding-small) var(--bi-padding-medium);
  background-color: var(--bi-color-container-error);
  color: var(--bi-color-functional-error);
}
.bi-embed-video__error[hidden] {
  display: none;
}
.bi-embed-video--has-error .bi-embed-video__error[hidden] {
  display: flex;
}
.bi-embed-video--has-error .bi-embed-video__media {
  display: none;
}
.bi-embed-video__error-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.bi-embed-video__error-text {
  margin: 0;
  font-family: var(--bi-font-family-primary);
  font-size: var(--bi-font-copy-m);
  line-height: var(--bi-line-height-tight);
}
/* Caption — figcaption beneath the player, always clamped to 2 lines.
   `min-width: 0` prevents the caption's longest unbreakable word from
   pushing the figure (and thus the thumbnail) wider than its container. */
.bi-embed-video__caption {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--bi-font-family-primary);
  line-height: var(--bi-line-height-tight);
  word-break: break-word;
  hyphens: auto;
  margin: 0;
  min-width: 0;
  max-width: 100%;
}
.bi-container-secondary .bi-embed-video,
.bi-container-secondary .bi-embed-video__caption {
  color: var(--bi-color-text-white);
}
/* ThemeModuleContent component styles */
/* ========================================
   Variables
   ======================================== */
:root {
  --image-offset-left: 159px;
  --image-offset-right: 128px;
  --image-offset-y: 60.5px;
}
/* ========================================
   Main Container
   ======================================== */
.bi-theme-module-desktop__content {
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: end;
  /* Top decorative image stays at the top edge, bottom decorative image stays at the bottom edge
     of the stretched grid cell. Any slack (when the left nav column is taller than the intrinsic
     image stack) is absorbed by the top and bottom image wrappers via `flex-grow: 1` below —
     the centre card keeps its fixed 391px height and the photos simply reveal more of their
     `object-fit: cover` content, so the card's inner edges stay flush against the images. */
  justify-content: flex-start;
  /* dimensions */
  width: 100%;
  /* positioning */
  position: relative;
}
/* ========================================
   Decorative Images (Top/Bottom)
   ======================================== */
/* Image Wrapper */
.bi-theme-module-desktop__content-image-wrapper {
  /* layout */
  display: flex;
  justify-content: center;
  /* dimensions — grow to fill any slack between the top edge / bottom edge of the section and the
     centre card, so there is never a visible gap. 306px is the design-spec minimum height. */
  flex: 1 0 306px;
  /* spacing */
  margin-right: auto;
  /* positioning */
  position: relative;
  z-index: var(--bi-z-index-theme-module-inactive);
}
/* Image Element */
.bi-theme-module-desktop__content-image {
  /* layout */
  display: block;
  /* dimensions — fill the wrapper's height so the image adapts to any extra slack; width stays
     capped at the design spec. `object-fit: cover` handles the cropping gracefully. */
  height: 306px;
  width: 544px;
  /* appearance */
  object-fit: cover;
  opacity: 0.5;
}
/* Top Image specific */
.bi-theme-module-desktop__content-image--top {
  /* appearance */
  object-position: bottom;
}
/* Bottom Image specific */
.bi-theme-module-desktop__content-image--bottom {
  /* appearance */
  object-position: top;
}
/* ========================================
   Center Content Container
   ======================================== */
.bi-theme-module-desktop__content-center-container {
  /* layout */
  display: flex;
  flex-direction: row;
  align-self: flex-end;
  /* dimensions */
  height: 391px;
  flex-shrink: 0;
  width: calc(100% + var(--image-offset-left));
  max-width: 100vw;
  /* color */
  background-color: transparent;
  /* positioning */
  position: relative;
  z-index: var(--bi-z-index-theme-module-active);
}
/* ========================================
   Main Image Area
   ======================================== */
.bi-theme-module-desktop__content-main-image-wrapper {
  flex-shrink: 0;
}
.bi-theme-module-desktop__content-main-image {
  /* layout */
  display: block;
  /* dimensions */
  height: calc(391px + var(--image-offset-y) * 2);
  aspect-ratio: 1/1;
  /* transform */
  transform: translate(0, calc(-1 * var(--image-offset-y)));
  /* appearance */
  object-fit: cover;
  opacity: 1;
}
/* ========================================
   Text Content Area
   ======================================== */
.bi-theme-module-desktop__content-text-content {
  /* layout */
  display: flex;
  flex-direction: column;
  /* dimensions */
  width: 318px;
  flex-shrink: 0;
  /* spacing */
  padding: 48px 32px 40px;
  gap: 20px;
  /* color */
  background-color: var(--bi-color-container-white);
  /* positioning - above watermark */
  position: relative;
  z-index: var(--bi-z-index-theme-module-active);
}
/* Headline */
.bi-theme-module-desktop__content-headline {
  /* spacing */
  margin: 0;
  /* color */
  color: var(--bi-color-text-secondary);
}
.bi-theme-module-desktop__content-headline-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    color: var(--bi-color-brand-secondary-hover);
  }

  &:active {
    color: var(--bi-color-brand-secondary-active);
  }

  &:focus-visible {
    outline: 2px solid var(--bi-color-focus);
    outline-offset: 2px;
  }
}
/* Description */
.bi-theme-module-desktop__content-description {
  /* layout */
  display: -webkit-box;
  /* dimensions */
  max-height: 198px;
  /* spacing */
  margin: 0;
  /* typography */
  letter-spacing: 0;
  /* color */
  color: var(--bi-color-text-black);
  /* text truncation */
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  line-clamp: 9;
}
/* ThemeModuleNavigation component styles */
/* ========================================
   Main Container
   ======================================== */
.bi-theme-module-desktop__navigation {
  /* layout */
  display: flex;
  flex-direction: column;
  /* dimensions */
  height: 100%;
  /* color */
  color: var(--bi-color-text-white);
}
/* ========================================
   Headline
   ======================================== */
/* Nested under the block to reach specificity (0,2,0) so it beats the global
   `h2:not(:last-child) { margin-bottom }` rule in core.css (specificity 0,1,1)
   without resorting to !important. */
.bi-theme-module-desktop__navigation .bi-theme-module-desktop__navigation-headline {
  /* spacing */
  margin-bottom: 64px;
  /* Negative right margin neutralises the navigation-wrapper's `padding-right: 99px`
     so the headline can use the column's full 391px width. Without this the column
     content area is only 292px, which is too narrow to fit "Unsere Themen" on a
     single line at the 40px headline font. The link list / button below still
     respect the wrapper padding because they don't get this override. */
  margin-right: -99px;
  /* color */
  color: var(--bi-color-text-white);
  /* Wrap long headlines at word boundaries; never overflow the column. */
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
  /* Clamp the headline to a maximum of 2 lines so very long titles never
     push the navigation list / button below the fold. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ========================================
   Link List
   ======================================== */
.bi-theme-module-desktop__navigation-list {
  /* layout */
  display: flex;
  flex-direction: column;
  /* dimensions — fill the flex parent (navigation column) so the list occupies the space
     between headline and button; min-height:0 allows it to shrink below its intrinsic
     content height so overflow:auto can kick in *only* when items exceed that space */
  flex: 1 1 auto;
  min-height: 0;
  /* spacing */
  gap: 20px;
  padding: 0;
  margin-bottom: 64px;
  /* list style */
  list-style: none;
  /* scroll behavior — only triggers when item count exceeds the available column height */
  overflow: auto;
}
.bi-theme-module-desktop__navigation-list:has(:focus-visible) {
  padding: 4px;
}
/* Custom scrollbar styling: hidden by default, visible on hover */
.bi-theme-module-desktop__navigation-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.bi-theme-module-desktop__navigation-list:hover::-webkit-scrollbar {
  width: 8px;
}
.bi-theme-module-desktop__navigation-list::-webkit-scrollbar-thumb {
  background: var(--bi-color-background-dark-grey);
  border-radius: 8px;
}
/* Override global ul:not(:last-child) margin-bottom with higher specificity */
.bi-theme-module-desktop__navigation-list:not(:last-child) {
  margin-bottom: 64px;
}
/* Suppress global ul > li::before dot */
.bi-theme-module-desktop__navigation-item::before {
  content: none;
}
.bi-theme-module-desktop__navigation-item {
  /* layout */
  display: block;
  /* reset global li hanging-indent padding (no marker here) */
  padding-left: 0;
  /* reset global li:not(:last-child) margin-bottom: 20px — parent flex gap handles spacing */
  margin-bottom: 0;
}
/* ========================================
   Link Item
   ======================================== */
.bi-theme-module-desktop__navigation-link {
  /* layout */
  display: block;
  /* dimensions */
  width: calc(100% - 30px);
  min-height: 31px; /* Prevent layout shift when font-weight changes */
  /* typography */
  font-family: var(--bi-font-family-primary);
  font-size: 24px;
  font-weight: var(--bi-font-weight-regular);
  line-height: var(--bi-line-height-normal);
  letter-spacing: 0;
  text-decoration: none;
  /* color */
  color: var(--bi-color-text-white);
  /* text truncation */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* cursor */
  cursor: pointer;
  /* transition */
  transition: all 0.3s ease-in;

  &:hover {
    /* color: var(--bi-color-button-link-secondary-hover); */
    color: var(--bi-color-text-white);
    text-decoration: underline;
  }

  &:focus-visible,
  &:has(:focus-visible) {
    outline: none;
    box-shadow:
      0 0 0 1px var(--bi-color-focus-inner),
      0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
  }

  &:active {
    color: var(--bi-color-text-white);
    font-weight: var(--bi-font-weight-bold);
  }
}
/* Active Link State */
.bi-theme-module-desktop__navigation-link--active {
  /* typography */
  font-weight: var(--bi-font-weight-semibold);
  line-height: var(--bi-line-height-tight);
  letter-spacing: var(--bi-letter-spacing-medium);
  /* color */
  color: var(--bi-color-text-white);

  &:focus-visible,
  &:has(:focus-visible) {
    outline: none;
    box-shadow:
      0 0 0 1px var(--bi-color-focus-inner),
      0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
  }
}
/* ========================================
   Action Area
   ======================================== */
.bi-theme-module-desktop__navigation-action {
  /* spacing */
  margin-top: auto;
}
/* Dialog molecule – reusable modal shell using native <dialog> */
.bi-dialog {
  /* reset UA dialog so the element is just a transparent viewport-filling overlay */
  border: none;
  padding: 0;
  margin: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  /* color */
  background: transparent;
  /* overflow */
  overflow: visible;

  /* Open state – shown via showModal() or CMS preview class */
  &[open],
  &.bi-dialog--open {
    /* position — fill viewport */
    position: fixed;
    inset: 0;
    z-index: var(--bi-z-index-dialog);
    /* layout — centers the inner container horizontally and vertically */
    display: grid;
    place-items: center;
    /* interaction */
    pointer-events: auto;
  }

  /* Native backdrop */
  &::backdrop {
    /* color – matches Figma: --bi-color-base-grey-100 (#EAE9EB) at 80% fill */
    background-color: var(--bi-color-base-grey-100);
    opacity: 0.8;
  }

  /* Inner container – the visible modal box */
  .bi-dialog__container {
    /* position — anchor for close button */
    position: relative;
    /* dimensions — bounded by viewport, rest scrolls inside the box */
    width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    /* spacing */
    padding: 13px 18px 29px;
    /* color */
    background-color: var(--bi-color-container-white);
    /* elevation */
    box-shadow: var(--bi-elevation-big);
    /* overflow — container itself scrolls when content exceeds its height */
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Close button – overrides Button atom defaults */
  .bi-dialog__close.bi-button {
    /* position */
    position: absolute;
    top: 13px;
    right: 13px;
    /* reset */
    min-height: auto;
    width: auto;
    padding: 4px;
    background: none;
    border: none;
    border-radius: 0;
    /* typography */
    font-size: var(--bi-font-size-xl);
    line-height: 1;
    -webkit-text-stroke: 1.5px currentColor;
    /* color */
    color: var(--bi-color-brand-secondary);
    /* behavior */
    cursor: pointer;

    &:hover {
      color: var(--bi-color-brand-secondary);
      opacity: 0.7;
    }

    &:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
    }
  }

  /* Body wrapper */
  .bi-dialog__body {
    /* layout */
    display: flex;
    flex-direction: column;
  }
}
/* Desktop */
@media (min-width: 1200px) {
  .bi-dialog {
    .bi-dialog__container {
      /* dimensions */
      width: min(100vw - 32px, 737px);
      /* spacing */
      padding: 55px 121px;
    }

    .bi-dialog__close {
      /* position */
      top: 26px;
      right: 44px;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .bi-dialog,
  .bi-dialog::backdrop {
    animation: none;
  }
}
/* Formcentric overrides — 🟢 NEW VARIANT (fc-*)
 * ---------------------------------------------
 * Restyle the *modern* Formcentric runtime's `fc-*` markup so it matches the
 * rest of the component library (Input, Checkbox, RadioButton, Dropdown,
 * Button, ...). Formcentric is delivered by the CMS at runtime; we never
 * import it. Every selector here is anchored to `[data-fc-id]` so these rules
 * can't bleed into our own atoms, and so we only restyle Formcentric content
 * the CMS injects.
 *
 * The OLD sibling stylesheet `formcentric.mwf.css` covers the legacy
 * `jquery-webforms` 1.8 runtime — see ADR-0011 for why both exist.
 *
 * Opt-out: add `data-fc-unstyled` to a `[data-fc-id]` root to bypass our
 * overrides — used by the "Before vs After" Storybook story.
 *
 * Source of truth for selectors: the `seattle` theme of `@formcentric/client`
 * (templates/elements/* and templates/components/*).
 */
/* ── Seattle theme variable bindings ─────────────────────────────────
 * Seattle reads its colors, spacing, and feature toggles from these CSS
 * variables (defined upstream in `@formcentric/client@4`'s `definition.json`).
 * The CMS only ships our `main.css`, so if we don't set them here the
 * vendored Seattle CSS resolves `rgba(var(--primaryColor), 1)` to an
 * invalid color in production. RGB triplets are required because Seattle
 * always wraps them in `rgba(…, alpha)`.
 *
 * Scoped to `[data-fc-id]` (not `:root`) so these generic-named tokens
 * stay confined to FC mount points and can't collide with anything else
 * a host page loads. The scope deliberately INCLUDES `[data-fc-unstyled]`
 * — the "before" variant in our demos still needs colors to render with. */
[data-fc-id] {
  --primaryColor: 228, 0, 58;       /* #e4003a — IDW red */
  --secondaryColor: 20, 41, 128;    /* #142980 — Seattle accent */
  --textColor: 48, 48, 48;          /* #303030 */
  --labelColor: 20, 41, 128;
  --successColor: 80, 196, 136;
  --errorColor: 221, 53, 34;
  --fontFamily: var(--bi-font-family-primary, 'Source Sans Pro', sans-serif);
  --fontSize: 16px;
  --fontSizeMobile: 16px;
  --borderRadius: 0px;
  --fieldSpacing: 3em;
  --pageAnimationDuration: 0ms;
  --validationIconDisplay: block;
  --logoDisplay: none;
  --logoImage: none;
  --previewImage: none;
  --pageSliderOffset: 0;
  --pageSliderTranslate: 0%;
}
/* ── Seattle theme reset ────────────────────────────────────────────
 * Seattle (the upstream FC theme) ships a floating-label pattern: it
 * positions `.fc-*__label` absolutely on top of the input, then floats
 * the label up when the input has a value. IDW's design has labels
 * stacked above inputs (the atom Input pattern), so we reset Seattle's
 * positioning here BEFORE the per-component rules below take over.
 *
 * These selectors are written to match Seattle's specificity (it uses
 * `*:not(.fc-fieldset__legend):not(.fc-captcha):not(.fc-select--has-image)`)
 * so cascade order alone wins — without the `*:not(...)` chain we'd lose
 * on specificity. */
[data-fc-id]:not([data-fc-unstyled]) *:not(.fc-captcha):not(.fc-select--has-image) > .fc-textinput__label,
[data-fc-id]:not([data-fc-unstyled]) *:not(.fc-captcha):not(.fc-select--has-image) > .fc-textarea__label,
[data-fc-id]:not([data-fc-unstyled]) *:not(.fc-captcha):not(.fc-select--has-image) > .fc-date__label,
[data-fc-id]:not([data-fc-unstyled]) *:not(.fc-captcha):not(.fc-select--has-image) > .fc-select__label,
[data-fc-id]:not([data-fc-unstyled]) *:not(.fc-captcha):not(.fc-select--has-image) > .fc-file__label,
[data-fc-id]:not([data-fc-unstyled]) *:not(.fc-captcha):not(.fc-select--has-image) > .fc-calculatedvalue__label,
[data-fc-id]:not([data-fc-unstyled]) *:not(.fc-captcha):not(.fc-select--has-image) > .fc-captcha__label {
  /* unset Seattle's floating-label position so the label sits in normal flow above the input */
  position: static;
  top: auto;
  z-index: auto;
}
[data-fc-id]:not([data-fc-unstyled]) .fc-textinput__label .fc-label,
[data-fc-id]:not([data-fc-unstyled]) .fc-textarea__label .fc-label,
[data-fc-id]:not([data-fc-unstyled]) .fc-date__label .fc-label,
[data-fc-id]:not([data-fc-unstyled]) .fc-select__label .fc-label,
[data-fc-id]:not([data-fc-unstyled]) .fc-file__label .fc-label,
[data-fc-id]:not([data-fc-unstyled]) .fc-calculatedvalue__label .fc-label,
[data-fc-id]:not([data-fc-unstyled]) .fc-captcha__label .fc-label {
  /* Seattle pads + white-bg's labels for its floating-label cutout — undo
     for ALL field types (was only applied to fc-textinput originally). */
  background-color: transparent;
  padding: 0;
}
/* Seattle wraps the form title in a header with a dark-blue 1.25px border
   ("--secondaryColor"). IDW design has no chrome around the title. */
[data-fc-id]:not([data-fc-unstyled]) .fc-form__header {
  border: none;
  padding: 0;
  margin-bottom: var(--bi-gap-large);
}
/* Force IDW typography on every FC element. Seattle's `--fontFamily`
   theme variable doesn't always resolve to a valid font list (and native
   form controls like <input>, <button>, <select> don't inherit font from
   their ancestor by default — they use the UA stylesheet). */
[data-fc-id]:not([data-fc-unstyled]),
[data-fc-id]:not([data-fc-unstyled]) input,
[data-fc-id]:not([data-fc-unstyled]) select,
[data-fc-id]:not([data-fc-unstyled]) textarea,
[data-fc-id]:not([data-fc-unstyled]) button,
[data-fc-id]:not([data-fc-unstyled]) label {
  font-family: var(--bi-font-family-primary, 'Source Sans Pro', sans-serif);
}
/* Seattle hides the native radio/checkbox via `opacity: 0` and paints a
   custom bullet/box via `::before` (outer circle) and `::after` (inner
   dot) on `.fc-radio__label` / `.fc-checkbox__label`, both absolutely
   positioned. IDW shows the real native input (styled via `appearance:
   none` + custom bullet via `::after` on the input itself) — kill the
   Seattle pseudo-bullets and make the native input visible again. */
[data-fc-id]:not([data-fc-unstyled]) .fc-radio__input,
[data-fc-id]:not([data-fc-unstyled]) .fc-checkbox__input {
  opacity: 1;
  position: relative;
  clip: auto;
}
[data-fc-id]:not([data-fc-unstyled]) .fc-radio__label::before,
[data-fc-id]:not([data-fc-unstyled]) .fc-radio__label::after,
[data-fc-id]:not([data-fc-unstyled]) .fc-checkbox__label::before,
[data-fc-id]:not([data-fc-unstyled]) .fc-checkbox__label::after,
/* the `:checked + label::after` variant has higher specificity than the
   plain version above, so re-target it explicitly to kill the checked-state
   inner dot Seattle paints separately. */
[data-fc-id]:not([data-fc-unstyled]) .fc-radio__input:checked + .fc-radio__label::before,
[data-fc-id]:not([data-fc-unstyled]) .fc-radio__input:checked + .fc-radio__label::after,
[data-fc-id]:not([data-fc-unstyled]) .fc-checkbox__input:checked + .fc-checkbox__label::before,
[data-fc-id]:not([data-fc-unstyled]) .fc-checkbox__input:checked + .fc-checkbox__label::after {
  content: none;
  display: none;
}
/* Seattle paints the dropdown arrow as a separate `<div class="fc-select__icon">`
   element (not a pseudo-element) — a red circle background with a chevron.
   Hide it; the native `<select>` already shows the browser's own chevron. */
[data-fc-id]:not([data-fc-unstyled]) .fc-select__icon {
  display: none;
}
/* Seattle paints a dark-blue border + 20% red background on the
   `:checked` + label/text combo (a card-style toggle). IDW has plain
   tick boxes / radio dots, so kill the card chrome.

   These selectors match Seattle's :checked-adjacent specificity so they
   beat the theme without needing !important. */
[data-fc-id]:not([data-fc-unstyled]) .fc-radio__input + .fc-radio__label .fc-radio__text,
[data-fc-id]:not([data-fc-unstyled]) .fc-radio__input:checked + .fc-radio__label .fc-radio__text,
[data-fc-id]:not([data-fc-unstyled]) .fc-checkbox__input + .fc-checkbox__label .fc-checkbox__text,
[data-fc-id]:not([data-fc-unstyled]) .fc-checkbox__input:checked + .fc-checkbox__label .fc-checkbox__text {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-height: 20px;
}
/* Lay out the bullet (native input) + label as a row with a clean gap.
   Without this, Seattle's defaults leave the text either overlapping the
   bullet or stacked oddly because of `flex-flow: wrap` on the parent. */
[data-fc-id]:not([data-fc-unstyled]) .fc-radio,
[data-fc-id]:not([data-fc-unstyled]) .fc-checkbox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
}
[data-fc-id]:not([data-fc-unstyled]) .fc-radio__label,
[data-fc-id]:not([data-fc-unstyled]) .fc-checkbox__label {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
}
/* Seattle uses `order` to position legends BELOW the options. IDW design
   has the legend/label above. Force document order on all legends. */
[data-fc-id]:not([data-fc-unstyled]) .fc-radiogroup__legend,
[data-fc-id]:not([data-fc-unstyled]) .fc-checkboxgroup__legend,
[data-fc-id]:not([data-fc-unstyled]) .fc-file__legend,
[data-fc-id]:not([data-fc-unstyled]) .fc-captcha__label {
  order: -1;
  margin-bottom: var(--bi-gap-small);
}
/* Seattle wraps `.fc-select` / `.fc-textinput` / etc. with `flex-flow: wrap`
   and `align-items: center`, which centers the label wrapper horizontally
   inside the field (since the wrapper shrinks to content width). IDW wants
   the label flush-left, above the input. Force left alignment everywhere. */
[data-fc-id]:not([data-fc-unstyled]) .fc-textinput,
[data-fc-id]:not([data-fc-unstyled]) .fc-textarea,
[data-fc-id]:not([data-fc-unstyled]) .fc-date,
[data-fc-id]:not([data-fc-unstyled]) .fc-select,
[data-fc-id]:not([data-fc-unstyled]) .fc-select__wrapper,
[data-fc-id]:not([data-fc-unstyled]) .fc-file,
[data-fc-id]:not([data-fc-unstyled]) .fc-captcha,
[data-fc-id]:not([data-fc-unstyled]) .fc-calculatedvalue {
  align-items: stretch;
}
[data-fc-id]:not([data-fc-unstyled]) .fc-textinput__label,
[data-fc-id]:not([data-fc-unstyled]) .fc-textarea__label,
[data-fc-id]:not([data-fc-unstyled]) .fc-date__label,
[data-fc-id]:not([data-fc-unstyled]) .fc-select__label,
[data-fc-id]:not([data-fc-unstyled]) .fc-file__label,
[data-fc-id]:not([data-fc-unstyled]) .fc-captcha__label,
[data-fc-id]:not([data-fc-unstyled]) .fc-calculatedvalue__label {
  align-self: flex-start;
  flex: 1 1 100%;
}
/* Seattle's dropdown arrow is a red circle background painted via `::after`
   on `.fc-select__wrapper` or similar. IDW uses a plain chevron via our
   per-component select rule. Kill the Seattle arrow chrome. */
[data-fc-id]:not([data-fc-unstyled]) .fc-select__wrapper::before,
[data-fc-id]:not([data-fc-unstyled]) .fc-select__wrapper::after,
[data-fc-id]:not([data-fc-unstyled]) .fc-select-trigger,
[data-fc-id]:not([data-fc-unstyled]) .fc-select__select::before,
[data-fc-id]:not([data-fc-unstyled]) .fc-select__select::after {
  display: none;
}
/* Seattle's file-upload widget is a giant blue square with a `+` plus
   sign. The text "Datei auswählen" is hidden via `text-indent: -9999px`
   and replaced by a `::before` pseudo-element showing the `+` icon. We
   replace this with the IDW dashed-card design: dashed border, centered
   uppercase heading via `::before` on the dropzone, red-pill button.
   The `.fc-file__label` is reordered to sit above the card. */
[data-fc-id]:not([data-fc-unstyled]) .fc-file {
  border: 2px dashed var(--bi-color-base-grey-400, #b3b2b4);
  border-radius: 0;
  padding: 40px 24px;
  background-color: var(--bi-color-container-white, #fff);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* Label "Anhang" sits OUTSIDE the dashed card, above it.
   Reset Seattle's flex order + push it above by absolute-positioning. */
[data-fc-id]:not([data-fc-unstyled]) .fc-file__label {
  order: -2;
  position: absolute;
  top: -28px;
  left: 0;
  padding: 0;
  background: transparent;
}
/* Stack heading + button vertically, both centered inside the card. */
[data-fc-id]:not([data-fc-unstyled]) .fc-file__input {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}
/* Add the uppercase "drop file here" heading inside the card via ::before
   on the dropzone wrapper. */
[data-fc-id]:not([data-fc-unstyled]) .fc-file__input::before {
  content: 'DATEI ZUM HOCHLADEN HIER ABLEGEN';
  display: block;
  text-align: center;
  font-size: var(--bi-font-copy-s, 14px);
  font-weight: var(--bi-font-weight-semibold, 600);
  letter-spacing: 0.5px;
  color: var(--bi-color-text-dark-grey, #303030);
}
/* The button itself: red IDW pill, white text, larger size. Override the
   per-component outlined style (lines ~856+) by being more specific. */
[data-fc-id]:not([data-fc-unstyled]) .fc-file__input .fc-file__button {
  text-indent: 0;
  width: auto;
  height: auto;
  min-height: 40px;
  padding: 0 32.5px;
  border: none;
  border-radius: var(--bi-radius-full, 999px);
  background-color: var(--bi-color-button-primary);
  color: var(--bi-color-button-primary-text);
  font-weight: var(--bi-font-weight-semibold);
  align-self: center;
}
[data-fc-id]:not([data-fc-unstyled]) .fc-file__input .fc-file__button:hover {
  background-color: var(--bi-color-button-primary-hover);
  color: var(--bi-color-button-primary-text);
  border-color: transparent;
}
[data-fc-id]:not([data-fc-unstyled]) .fc-file__button::before,
[data-fc-id]:not([data-fc-unstyled]) .fc-file__button::after {
  content: none;
}
/* Seattle's combobox arrow is a red circle. IDW uses a plain chevron
   (the existing `.fc-select__select` rules below set the right styling). */
[data-fc-id]:not([data-fc-unstyled]) .fc-select__select::after,
[data-fc-id]:not([data-fc-unstyled]) .fc-select-trigger::after,
[data-fc-id]:not([data-fc-unstyled]) .fc-select__select::before,
[data-fc-id]:not([data-fc-unstyled]) .fc-select-trigger::before {
  background: none;
  border-radius: 0;
}
/* Seattle gives inputs a 2px secondary-coloured border by default. We want
   a 1px transparent border (atom Input pattern). Override with the same
   specificity Seattle uses. */
[data-fc-id]:not([data-fc-unstyled]) .fc-textinput__input input,
[data-fc-id]:not([data-fc-unstyled]) .fc-date__input input,
[data-fc-id]:not([data-fc-unstyled]) .fc-textarea__textarea textarea {
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
}
[data-fc-id]:not([data-fc-unstyled]) {
  /* ── Field wrapper ─────────────────────────────────────────────── */
  & .fc-field {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
    /* dimensions */
    width: 100%;
  }

  & .fc-field--hidden {
    display: none;
  }

  /* ── Label ─────────────────────────────────────────────────────── */
  & .fc-label {
    /* layout */
    display: block;
    /* typography */
    font-size: var(--bi-font-copy-s);
    line-height: var(--bi-line-height-tight);
    /* color */
    color: var(--bi-color-text-dark-grey);
    /* spacing */
    margin: 0;
    /* behavior */
    cursor: inherit;
  }

  & .fc-required {
    /* color */
    color: var(--bi-color-brand-primary-750);
    /* spacing */
    margin-left: 2px;
  }

  /* ── Hint, short hint, counter ─────────────────────────────────── */
  & .fc-shorthint {
    /* typography */
    font-size: var(--bi-font-copy-s);
    /* color */
    color: var(--bi-color-brand-grey-mid);
  }

  & .fc-counter {
    /* typography */
    font-size: var(--bi-font-copy-s);
    /* color */
    color: var(--bi-color-brand-grey-mid);
  }

  & .fc-hint {
    /* hint button anchors the popup */
    position: relative;
  }

  & .fc-hint__button {
    /* dimensions */
    width: 24px;
    height: 24px;
    /* border */
    border: 1px solid var(--bi-color-brand-secondary);
    border-radius: var(--bi-radius-full);
    /* color */
    background: transparent;
    color: var(--bi-color-brand-secondary);
    /* typography */
    font-size: 14px;
    line-height: 1;
    /* behavior */
    cursor: pointer;
  }

  /* Hint content — hidden tooltip, opens on hover/focus of the button.
     FC normally toggles this with JS; without that runtime we use CSS only. */
  & .fc-hint__content {
    /* layout */
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    /* dimensions */
    width: 240px;
    /* spacing */
    padding: 12px;
    /* color */
    background-color: var(--bi-color-container-white);
    color: var(--bi-color-text-dark-grey);
    /* border */
    border: 1px solid var(--bi-color-base-grey-400);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* typography */
    font-size: var(--bi-font-copy-s);
    line-height: var(--bi-line-height-normal);
    /* visibility */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 10;
  }

  & .fc-hint:hover .fc-hint__content,
  & .fc-hint:focus-within .fc-hint__content {
    visibility: visible;
    opacity: 1;
  }

  /* ── Error message ─────────────────────────────────────────────── */
  & .fc-error {
    /* typography */
    font-size: var(--bi-font-copy-s);
    /* color */
    color: var(--bi-color-functional-error);
  }

  & .fc-sr-only {
    /* a11y-only */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ── Text input (textinput, email, tel, number, password, ...) ─
   * FC's DOM order is: <input>, <label>, <decorators>. We want the label
   * above the input visually, so the label gets `order: -1` and decorators
   * sit absolutely on top of the input. */
  & .fc-textinput {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
  }

  & .fc-textinput__input {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
    /* position */
    position: relative;

    & input {
      /* layout */
      display: flex;
      align-items: center;
      /* dimensions */
      width: 100%;
      height: 48px;
      /* spacing */
      padding: 12px;
      /* border */
      border: 1px solid transparent;
      border-radius: var(--bi-radius-none);
      /* typography */
      font-size: var(--bi-font-copy-s);
      font-family: inherit;
      /* color */
      color: var(--bi-color-text-dark-grey);
      background-color: var(--bi-color-container-white);
      /* behavior */
      box-sizing: border-box;
      transition: var(--transition-base);
    }

    & input::placeholder {
      color: var(--bi-color-text-dark-grey);
    }

    & input:hover,
    & input:focus {
      outline: none;
      border-color: var(--bi-color-brand-secondary);
    }

    & input:disabled {
      cursor: not-allowed;
      background-color: var(--bi-color-container-grey);
      color: var(--bi-color-base-grey-550);
    }

    & input:disabled::placeholder {
      color: var(--bi-color-base-grey-550);
    }
  }

  & .fc-textinput__label,
  & .fc-textarea__label,
  & .fc-date__label,
  & .fc-select__label,
  & .fc-file__label {
    /* visual order: label before the input — DOM has the input first */
    order: -1;
  }

  /* Decorators (counter / validation icon / hint trigger) overlay the input */
  & .fc-decorators {
    /* position over the bottom edge of the input row */
    position: absolute;
    right: 12px;
    bottom: 14px;
    /* layout */
    display: flex;
    align-items: center;
    gap: 8px;
    /* prevent decorators from blocking the input */
    pointer-events: none;
  }

  & .fc-decorators > * {
    pointer-events: auto;
  }

  /* ── Textarea ──────────────────────────────────────────────────── */
  & .fc-textarea {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
  }

  & .fc-textarea__textarea {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
    /* position */
    position: relative;

    & textarea {
      /* dimensions */
      width: 100%;
      min-height: 96px;
      /* spacing */
      padding: 12px;
      /* border */
      border: 1px solid transparent;
      border-radius: var(--bi-radius-none);
      /* typography */
      font-size: var(--bi-font-copy-s);
      font-family: inherit;
      line-height: var(--bi-line-height-normal);
      /* color */
      color: var(--bi-color-text-dark-grey);
      background-color: var(--bi-color-container-white);
      /* behavior */
      box-sizing: border-box;
      resize: vertical;
      transition: var(--transition-base);
    }

    & textarea::placeholder {
      color: var(--bi-color-text-dark-grey);
    }

    & textarea:hover,
    & textarea:focus {
      outline: none;
      border-color: var(--bi-color-brand-secondary);
    }

    & textarea:disabled {
      cursor: not-allowed;
      background-color: var(--bi-color-container-grey);
      color: var(--bi-color-base-grey-550);
    }

    /* Decorators inside a textarea sit bottom-right, not vertically centered */
    & .fc-decorators {
      top: auto;
      bottom: 8px;
      transform: none;
    }
  }

  /* ── Date field ────────────────────────────────────────────────── */
  & .fc-date {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
  }

  & .fc-date__input {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
    /* position */
    position: relative;

    & input {
      /* dimensions */
      width: 100%;
      height: 48px;
      /* spacing */
      padding: 12px 44px 12px 12px;
      /* border */
      border: 1px solid transparent;
      border-radius: var(--bi-radius-none);
      /* typography */
      font-size: var(--bi-font-copy-s);
      font-family: inherit;
      /* color */
      color: var(--bi-color-text-dark-grey);
      background-color: var(--bi-color-container-white);
      /* calendar glyph (matches DateInput atom) */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16' fill='none' stroke='%23005a8c' stroke-width='1.4'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='1'/%3E%3Cpath d='M1.5 6h13M5 1v3M11 1v3'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      /* behavior */
      box-sizing: border-box;
      transition: var(--transition-base);
    }

    & input:hover,
    & input:focus {
      outline: none;
      border-color: var(--bi-color-brand-secondary);
    }
  }

  /* ── Select / Combobox (native fallback styling) ──────────────── */
  & .fc-select {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
  }

  & .fc-select__wrapper {
    /* position */
    position: relative;
    order: 1;
  }

  & .fc-select__select {
    /* layout */
    display: block;
    /* dimensions */
    width: 100%;
    height: 48px;
    /* spacing */
    padding: 12px 40px 12px 12px;
    /* border */
    border: 1px solid transparent;
    border-radius: var(--bi-radius-none);
    /* typography */
    font-size: var(--bi-font-copy-s);
    font-family: inherit;
    line-height: var(--bi-line-height-tight);
    /* color */
    color: var(--bi-color-text-dark-grey);
    background-color: var(--bi-color-container-white);
    /* chevron — same construction as the Dropdown atom */
    background-image: linear-gradient(45deg, transparent 50%, var(--bi-color-brand-secondary) 50%),
      linear-gradient(135deg, var(--bi-color-brand-secondary) 50%, transparent 50%);
    background-position:
      calc(100% - 18px) 50%,
      calc(100% - 12px) 50%;
    background-size:
      6px 6px,
      6px 6px;
    background-repeat: no-repeat;
    /* behavior */
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: var(--transition-base);

    &:hover,
    &:focus {
      outline: none;
      border-color: var(--bi-color-brand-secondary);
    }

    &:disabled {
      cursor: not-allowed;
      background-color: var(--bi-color-container-grey);
      color: var(--bi-color-base-grey-550);
    }
  }

  /* Native <option> popup — match Dropdown atom's .bi-dropdown__item.
     Native options only honour `background-color`, `color`, `padding`, `font`
     and (Chrome 117+) `min-height` reliably across browsers; the OS-drawn
     selection highlight and popup border/shadow cannot be themed without
     either `appearance: base-select` support or a JS enhancement layer. */
  & .fc-select__select option {
    min-height: 48px;
    padding: 12px;
    font-size: var(--bi-font-copy-s);
    font-family: inherit;
    line-height: var(--bi-line-height-tight);
    color: var(--bi-color-base-grey-550);
    background-color: var(--bi-color-container-white);
  }

  & .fc-select__select option:checked {
    color: var(--bi-color-text-dark-grey);
    background-color: var(--bi-color-base-grey-050);
  }

  & .fc-select__select option:disabled {
    color: var(--bi-color-base-grey-400);
  }

  /* Progressive enhancement: Chrome 130+ exposes the popup as a stylable
     DOM tree under `appearance: base-select`. Where supported, this lifts
     the native restrictions above and lets us match the atom listbox 1:1
     (height, border, selection highlight, hover ring). Browsers without
     support keep the limited native styling. */
  @supports (appearance: base-select) {
    & .fc-select__select,
    & .fc-select__select::picker(select) {
      appearance: base-select;
    }

    & .fc-select__select::picker(select) {
      background-color: var(--bi-color-container-white);
      border: 1px solid var(--bi-color-brand-secondary);
      border-radius: var(--bi-radius-none);
      box-shadow: var(--bi-elevation-medium, 0 2px 8px rgba(0, 0, 0, 0.1));
      padding: 0;
      margin: 0;
    }

    & .fc-select__select option {
      min-height: 48px;
      padding: 12px;
      border: none;
      color: var(--bi-color-base-grey-550);
      background-color: var(--bi-color-container-white);
    }

    & .fc-select__select option:hover,
    & .fc-select__select option:focus {
      color: var(--bi-color-text-black);
      background-color: var(--bi-color-base-grey-050);
      box-shadow:
        inset 1px 0 0 var(--bi-color-brand-secondary),
        inset -1px 0 0 var(--bi-color-brand-secondary),
        inset 0 -1px 0 var(--bi-color-brand-secondary);
    }

    & .fc-select__select option:checked {
      color: var(--bi-color-text-dark-grey);
      background-color: var(--bi-color-base-grey-050);
    }
  }

  /* FC sometimes uses a custom trigger button. Keep the look consistent. */
  & .fc-select__trigger {
    /* dimensions */
    width: 100%;
    height: 48px;
    /* spacing */
    padding: 12px 40px 12px 12px;
    /* border */
    border: 1px solid transparent;
    border-radius: var(--bi-radius-none);
    /* color */
    background-color: var(--bi-color-container-white);
    color: var(--bi-color-text-dark-grey);
    /* typography */
    font-size: var(--bi-font-copy-s);
    text-align: left;
    /* behavior */
    cursor: pointer;
  }

  /* ── Fieldset (groups for checkbox/radio + standalone fieldsets) */
  & .fc-fieldset {
    /* reset native fieldset chrome */
    margin: 0;
    padding: 0;
    border: 0;
    /* layout */
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
    /* dimensions */
    min-width: 0;
  }

  & .fc-fieldset__legend {
    /* typography */
    font-size: var(--bi-font-copy-s);
    line-height: var(--bi-line-height-tight);
    /* color */
    color: var(--bi-color-text-dark-grey);
    /* spacing — legend isn't a flex item in browsers, so the parent's `gap`
       doesn't separate it from the first option. Add explicit margin. */
    padding: 0;
    margin-bottom: var(--bi-gap-medium);
    /* dimensions */
    width: 100%;
  }

  & .fc-fieldset__elements {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
  }

  & .fc-fieldset__options {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* ── Checkbox option (matches Checkbox atom) ───────────────────── */
  & .fc-checkbox {
    /* layout */
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  & .fc-checkbox__input {
    /* behavior */
    appearance: none;
    -webkit-appearance: none;
    /* position */
    position: relative;
    /* layout */
    flex-shrink: 0;
    /* dimensions */
    width: 20px;
    height: 20px;
    /* spacing */
    margin: 2px 0 0 0;
    padding: 0;
    /* border */
    border: none;
    border-radius: 0;
    /* color */
    background-color: var(--bi-color-brand-tertiary);
    /* behavior */
    cursor: pointer;
    transition: var(--transition-base);
  }

  & .fc-checkbox__input::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 3px;
    width: 16px;
    height: 14px;
    background-color: var(--bi-color-brand-secondary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5 8.5 6.5 12.5 13.5 4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5 8.5 6.5 12.5 13.5 4'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: 0;
    transition: opacity var(--transition-base);
  }

  & .fc-checkbox__input:checked::after {
    opacity: 1;
  }

  & .fc-checkbox__input:hover {
    background-color: var(--bi-color-brand-tertiary-hover);
  }

  & .fc-checkbox__input:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--bi-color-focus-inner),
      0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
  }

  & .fc-checkbox__input:disabled {
    background-color: var(--bi-color-container-grey);
    border: 1px solid var(--bi-color-base-grey-400);
    cursor: not-allowed;
  }

  & .fc-checkbox__label {
    /* spacing */
    padding-top: 4px;
    /* typography */
    font-size: var(--bi-font-copy-s);
    line-height: var(--bi-line-height-tight);
    /* color */
    color: var(--bi-color-text-black);
    /* behavior */
    cursor: pointer;
  }

  /* ── Radio option (matches RadioButton atom) ──────────────────── */
  & .fc-radio {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  & .fc-radio__input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 2px 0 0 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--bi-color-brand-tertiary);
    cursor: pointer;
    transition: var(--transition-base);
  }

  & .fc-radio__input::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--bi-color-brand-secondary);
    transform: translate(-50%, -50%) scale(0);
    transition: transform var(--transition-base);
  }

  & .fc-radio__input:checked::after {
    transform: translate(-50%, -50%) scale(1);
  }

  & .fc-radio__input:hover {
    background-color: var(--bi-color-brand-tertiary-hover);
  }

  & .fc-radio__input:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--bi-color-focus-inner),
      0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
  }

  & .fc-radio__input:disabled {
    background-color: var(--bi-color-container-grey);
    border: 1px solid var(--bi-color-base-grey-400);
    cursor: not-allowed;
  }

  & .fc-radio__label {
    padding-top: 4px;
    font-size: var(--bi-font-copy-s);
    line-height: var(--bi-line-height-tight);
    color: var(--bi-color-text-black);
    cursor: pointer;
  }

  /* ── File upload ───────────────────────────────────────────────── */
  & .fc-file {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
  }

  & .fc-file__input {
    display: flex;
  }

  & .fc-file__button {
    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* spacing */
    padding: 12px 24px;
    /* border */
    border: 1px solid var(--bi-color-brand-secondary);
    border-radius: var(--bi-radius-none);
    /* color */
    background-color: transparent;
    color: var(--bi-color-brand-secondary);
    /* typography */
    font-family: inherit;
    font-size: var(--bi-font-copy-s);
    font-weight: var(--bi-font-weight-semibold);
    /* behavior */
    cursor: pointer;
    transition: var(--transition-base);
  }

  & .fc-file__button:hover {
    background-color: var(--bi-color-brand-secondary);
    color: var(--bi-color-container-white);
  }

  & .fc-file__button:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--bi-color-focus-inner),
      0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
  }

  & .fc-file__button:disabled {
    cursor: not-allowed;
    border-color: var(--bi-color-base-grey-400);
    color: var(--bi-color-base-grey-550);
  }

  & .fc-file__button--delete,
  & .fc-file__button--download {
    padding: 4px 8px;
    border: none;
    background: transparent;
    color: var(--bi-color-brand-secondary);
  }

  & .fc-file__ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  & .fc-file__li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--bi-color-base-grey-100);
  }

  & .fc-file__filename {
    flex: 1;
    font-size: var(--bi-font-copy-s);
    color: var(--bi-color-text-dark-grey);
  }

  & .fc-file__filename--is-valid {
    color: var(--bi-color-functional-success);
  }

  /* ── Buttons — match the .bi-button--primary atom (red pill, fit-content) ── */
  & .fc-button {
    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* dimensions */
    width: fit-content;
    min-height: 40px;
    /* spacing */
    padding: 0 32.5px;
    gap: 5px;
    /* border */
    border: none;
    border-radius: var(--bi-radius-full);
    /* color */
    background-color: var(--bi-color-button-primary);
    color: var(--bi-color-button-primary-text);
    /* typography */
    font-family: inherit;
    font-size: var(--bi-font-copy-s);
    font-weight: var(--bi-font-weight-semibold);
    line-height: var(--bi-line-height-tight);
    letter-spacing: 0;
    /* behavior */
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-base);
  }

  & .fc-button:hover {
    background-color: var(--bi-color-button-primary-hover);
  }

  & .fc-button:active {
    background-color: var(--bi-color-button-primary-active);
  }

  & .fc-button:focus {
    outline: none;
  }

  & .fc-button:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--bi-color-focus-inner),
      0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
  }

  & .fc-button:disabled {
    cursor: not-allowed;
    background-color: var(--bi-color-base-grey-400);
    color: var(--bi-color-container-white);
  }

  /* Back / cancel — text-only secondary variant (matches .bi-button--secondary) */
  & .fc-button--back,
  & .fc-button--cancel,
  & .fc-button--footer_back,
  & .fc-button--footer_cancel {
    /* spacing */
    padding: 4px 12px 4px 0;
    /* border */
    border-radius: 0;
    /* color */
    background-color: transparent;
    color: var(--bi-color-text-secondary);
    /* typography */
    font-weight: var(--bi-font-weight-semibold);
  }

  & .fc-button--back:hover,
  & .fc-button--cancel:hover,
  & .fc-button--footer_back:hover,
  & .fc-button--footer_cancel:hover {
    background-color: transparent;
    color: var(--bi-color-button-secondary-hover);
  }

  & .fc-button--back:active,
  & .fc-button--cancel:active,
  & .fc-button--footer_back:active,
  & .fc-button--footer_cancel:active {
    background-color: transparent;
    color: var(--bi-color-button-secondary-active);
  }

  & .fc-button--loading {
    position: relative;
    color: transparent;
  }

  & .fc-button--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid var(--bi-color-button-primary-text);
    border-top-color: transparent;
    border-radius: 50%;
    animation: fc-spin 0.8s linear infinite;
  }

  /* Form-actions row left-aligns buttons; spacing comes from the row gap */
  & .fc-form-actions .fc-field {
    width: fit-content;
    margin: 0;
  }

  /* ── Field state modifiers ────────────────────────────────────── */
  & .fc-field--has-error .fc-textinput input,
  & .fc-field--has-error .fc-textarea textarea,
  & .fc-field--has-error .fc-date input,
  & .fc-field--has-error .fc-select__select,
  & .fc-field--has-error .fc-select__trigger {
    border-color: var(--bi-color-functional-error);
    background-color: var(--bi-color-functional-error-light);
    color: var(--bi-color-functional-error);
  }

  & .fc-field--has-error .fc-textinput input::placeholder,
  & .fc-field--has-error .fc-textarea textarea::placeholder {
    color: var(--bi-color-functional-error);
  }

  & .fc-field--has-error .fc-checkbox__input,
  & .fc-field--has-error .fc-radio__input {
    background-color: var(--bi-color-functional-error-light);
    border: 1px solid var(--bi-color-functional-error);
  }

  & .fc-field--has-error .fc-checkbox__label,
  & .fc-field--has-error .fc-radio__label,
  & .fc-field--has-error .fc-label {
    color: var(--bi-color-functional-error);
  }

  & .fc-field--focused .fc-textinput input,
  & .fc-field--focused .fc-textarea textarea,
  & .fc-field--focused .fc-date input,
  & .fc-field--focused .fc-select__select {
    border-color: var(--bi-color-brand-secondary);
  }

  & .fc-field--is-valid .fc-validation::after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-color: var(--bi-color-functional-success);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5 8.5 6.5 12.5 13.5 4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5 8.5 6.5 12.5 13.5 4'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  /* ── Field width helpers (FC-defined) ─────────────────────────── */
  & .fc-field.mwf-s {
    max-width: 240px;
  }
  & .fc-field.mwf-m {
    max-width: 360px;
  }
  & .fc-field.mwf-l {
    max-width: 560px;
  }

  /* ── Form shell ───────────────────────────────────────────────── */
  & .fc-form {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-large);
    /* dimensions */
    width: 100%;
  }

  & .fc-form__header {
    display: flex;
    align-items: center;
    gap: var(--bi-gap-medium);
  }

  & .fc-form__page-title {
    margin: 0;
    font-family: var(--bi-font-family-headline);
    font-size: var(--bi-font-headline-l);
    font-weight: var(--bi-font-weight-bold);
    color: var(--bi-color-text-black);
  }

  & .fc-pages,
  & .fc-page-wrapper,
  & .fc-page {
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
  }

  & .fc-page-wrapper:not(.fc-page-wrapper--current) {
    display: none;
  }

  & .fc-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: var(--bi-gap-medium);
  }

  /* ── Calculated value ─────────────────────────────────────────── */
  & .fc-calculatedvalue {
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
  }

  & .fc-calculatedvalue__value {
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
  }

  & .fc-calculatedvalue__label {
    order: -1;
  }

  & .fc-calculatedvalue__value input {
    width: 100%;
    height: 48px;
    padding: 12px;
    border: 1px solid transparent;
    background-color: var(--bi-color-base-grey-100);
    color: var(--bi-color-text-dark-grey);
    font-size: var(--bi-font-copy-s);
    font-family: inherit;
    box-sizing: border-box;
  }

  /* ── Captcha ──────────────────────────────────────────────────── */
  & .fc-captcha {
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
  }

  & .fc-captcha-placeholder {
    border: 1px solid var(--bi-color-base-grey-400);
    background-color: var(--bi-color-base-grey-100);
    padding: 12px;
  }

  & .fc-captcha-placeholder-container {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  & .fc-captcha-placeholder-checkbox {
    width: 24px;
    height: 24px;
    border: 1px solid var(--bi-color-brand-grey-mid);
    background-color: var(--bi-color-container-white);
  }

  & .fc-captcha-placeholder-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: var(--bi-font-copy-s);
    color: var(--bi-color-text-dark-grey);
  }

  & .fc-captcha-placeholder-captcha-brand {
    font-size: var(--bi-font-copy-s);
    color: var(--bi-color-brand-grey-mid);
  }

}
@keyframes fc-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Formcentric overrides — 🟠 OLD VARIANT (mwf-*)
 * ----------------------------------------------
 * Restyle the *legacy* `jquery-webforms` 1.8 markup (originally "Monday
 * Webforms") so it matches the rest of the component library — same Figma,
 * same design tokens as the modern Seattle-theme overrides in
 * `formcentric.css`. The runtime is delivered by the CMS, we never bundle it.
 * Every selector here is anchored to `form.mwf-form` so these rules can't
 * bleed into our own atoms, and so we only restyle Formcentric content the
 * CMS injects.
 *
 * The NEW sibling stylesheet `formcentric.css` covers `@formcentric/client`
 * 4.x — see ADR-0011 for why both exist.
 *
 * Every class targeted here is either present in the CMS-captured form
 * (`Formcentric.mwf.real.ts`) or in the CMS-shipped legacy stylesheet
 * (`public/vendor/mwf/webforms_css.css`). State-modifier classes that
 * jquery-webforms might add at runtime are NOT targeted — we don't have
 * confirmation of the names, so state styling relies only on CSS standard
 * pseudo-classes (`:focus-within`, `:invalid`, etc.).
 */
form.mwf-form {
  /* ── Form shell ────────────────────────────────────────────────── */
  display: flex;
  flex-direction: column;
  gap: var(--bi-gap-large);
  width: 100%;
  max-width: unset;
  padding: 2rem;

  /* The field list, buttons row, and pager are all rendered as unclassed
     <ul> children of <form.mwf-form> by the runtime. Strip the native
     list chrome — core.css paints disc bullets via `ul > li::before`,
     which we don't want for form fields. The 16px column gap applies to
     the field list; the button-row variant immediately overrides it to
     a 12px row gap below. */
  & > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-large);
  }

  & > ul > li::before {
    content: none;
  }

  /* The second <ul> in `form.mwf-form` (per form-check.html:200-207) is
     the button row — Weiter / Abbrechen sit side-by-side. */
  & > ul:has(> li.mwf-button) {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: var(--bi-gap-medium);
  }

  /* ── Field wrapper ─────────────────────────────────────────────── */
  & .mwf-field {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
    /* dimensions */
    width: 100%;
    /* spacing */
    padding: 0;
    margin: 0;
  }

  /* ── Label ─────────────────────────────────────────────────────── */
  & .mwf-label {
    /* layout */
    display: block;
    /* typography */
    font-size: var(--bi-font-copy-s);
    line-height: var(--bi-line-height-tight);
    /* color */
    color: var(--bi-color-text-dark-grey);
    /* spacing */
    margin: 0;
    /* behavior */
    cursor: inherit;
  }

  & .mwf-required {
    /* color */
    color: var(--bi-color-brand-primary-750);
    /* spacing */
    margin-left: 2px;
  }

  & .mwf-field:not(:has(.mwf-upload)) > .mwf-label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    padding: 0 !important;
    margin: 0 0 4px 0 !important;
    font-size: var(--bi-font-copy-s) !important;
    font-weight: var(--bi-font-weight-regular) !important;
    color: var(--bi-color-text-dark-grey) !important;
    line-height: var(--bi-line-height-tight) !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* ── Hint ──────────────────────────────────────────────────────── *
   * mwf has a flat hint block (no popup), so we render it inline below the
   * input rather than as a toggle. */
  & .mwf-hint {
    font-size: var(--bi-font-copy-s);
    color: var(--bi-color-brand-grey-mid);
  }

  & .mwf-hint p {
    margin: 0;
  }

  /* Long labels (e.g. consent text) would otherwise be locked at the
     parent's min-width and refuse to wrap. Switch each option row to a
     2-column grid (input | text) with the text column allowed to shrink. */
  & .mwf-option > label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    white-space: normal;
  }

  /* ── Error message ─────────────────────────────────────────────── */
  & .mwf-error {
    font-size: var(--bi-font-copy-s);
    color: var(--bi-color-functional-error);
  }

  /* ── Input wrapper ─────────────────────────────────────────────── *
   * Acts as the equivalent of fc-textinput / fc-textinput__input. Stacks the
   * input and any sibling hint/error below it. */
  & .mwf-input {
    display: flex;
    flex-direction: column;
    gap: var(--bi-gap-medium);
    position: relative;
  }

  & .mwf-field:has(.mwf-select),
  & .mwf-input:has(.mwf-select) {
    overflow: visible !important;
  }

  /* ── Text input (text, email, tel, number, password, date as text) ── *
   * The runtime emits the same `mwf-text` class for <input> and <textarea>;
   * we split them with the `:not(textarea)` selector so we can set a height
   * on the inputs without breaking textarea auto-sizing. */
  & .mwf-text:not(textarea),
  & .mwf-input input[type='text'],
  & .mwf-input input[type='email'],
  & .mwf-input input[type='tel'],
  & .mwf-input input[type='number'],
  & .mwf-input input[type='password'],
  & .mwf-input input[type='url'] {
    /* layout */
    display: flex;
    align-items: center;
    /* dimensions */
    width: 100%;
    height: 48px;
    /* spacing */
    padding: 12px;
    /* border */
    border: 1px solid transparent;
    border-radius: var(--bi-radius-none);
    /* typography */
    font-size: var(--bi-font-copy-s);
    font-family: inherit;
    /* color */
    color: var(--bi-color-text-dark-grey);
    background-color: var(--bi-color-container-white);
    /* behavior */
    box-sizing: border-box;
    transition: var(--transition-base);
  }

  & .mwf-text:not(textarea)::placeholder,
  & .mwf-input input::placeholder {
    color: var(--bi-color-text-dark-grey);
  }

  & .mwf-text:not(textarea):hover,
  & .mwf-text:not(textarea):focus,
  & .mwf-input input:hover,
  & .mwf-input input:focus {
    outline: none;
    border-color: var(--bi-color-brand-secondary);
  }

  & .mwf-text:not(textarea):disabled,
  & .mwf-input input:disabled {
    cursor: not-allowed;
    background-color: var(--bi-color-container-grey);
    color: var(--bi-color-base-grey-550);
  }

  & .mwf-text:not(textarea):disabled::placeholder,
  & .mwf-input input:disabled::placeholder {
    color: var(--bi-color-base-grey-550);
  }

  /* ── Textarea ──────────────────────────────────────────────────── *
   * `mwf-text` also lands on <textarea>. The runtime sets inline
   * `width`/`height` on the element which we override via attribute selector
   * so the input behaves like our atoms. */
  & textarea.mwf-text,
  & .mwf-input textarea {
    /* dimensions */
    width: 100% !important;
    min-height: 96px;
    /* spacing */
    padding: 12px;
    /* border */
    border: 1px solid transparent;
    border-radius: var(--bi-radius-none);
    /* typography */
    font-size: var(--bi-font-copy-s);
    font-family: inherit;
    line-height: var(--bi-line-height-normal);
    /* color */
    color: var(--bi-color-text-dark-grey);
    background-color: var(--bi-color-container-white);
    /* behavior */
    box-sizing: border-box;
    resize: vertical;
    transition: var(--transition-base);
  }

  & textarea.mwf-text::placeholder,
  & .mwf-input textarea::placeholder {
    color: var(--bi-color-text-dark-grey);
  }

  & textarea.mwf-text:hover,
  & textarea.mwf-text:focus,
  & .mwf-input textarea:hover,
  & .mwf-input textarea:focus {
    outline: none;
    border-color: var(--bi-color-brand-secondary);
  }

  & textarea.mwf-text:disabled,
  & .mwf-input textarea:disabled {
    cursor: not-allowed;
    background-color: var(--bi-color-container-grey);
    color: var(--bi-color-base-grey-550);
  }

  /* ── Select / Combo box ────────────────────────────────────────── *
   * `mwf-multiple` is the runtime's "combo box" modifier — it appears on
   * single-value selects too in some configurations, so we don't differentiate
   * styling based on it. */
  & .mwf-select {
    /* layout */
    display: block;
    /* dimensions */
    width: 100%;
    height: 48px;
    /* spacing */
    padding: 12px 40px 12px 12px;
    /* border */
    border: 1px solid transparent;
    border-radius: var(--bi-radius-none);
    /* typography */
    font-size: var(--bi-font-copy-s);
    font-family: inherit;
    line-height: var(--bi-line-height-tight);
    /* color */
    color: var(--bi-color-text-dark-grey);
    background-color: var(--bi-color-container-white);
    /* Chevron — drawn as a stroked SVG path (two diagonal lines meeting
       in the middle). The two-`linear-gradient` half-triangle trick the
       Dropdown atom uses produces a *filled* triangle, which looked
       chunky against the IDW design's thin-stroke chevron — gradients
       can only fill, not stroke, so we need an actual SVG path here.
       Brand-secondary `#302683` is hardcoded because CSS custom
       properties can't resolve inside a `data:image/svg+xml` URI. */
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' stroke='%23302683' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: calc(100% - 14px) 50%;
    background-size: 12px 8px;
    background-repeat: no-repeat;
    /* behavior */
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: var(--transition-base);
  }

  & .mwf-select:hover,
  & .mwf-select:focus {
    outline: none;
    border-color: var(--bi-color-brand-secondary);
  }

  & .mwf-select:disabled {
    cursor: not-allowed;
    background-color: var(--bi-color-container-grey);
    color: var(--bi-color-base-grey-550);
  }

  /* Native <option> popup — match Dropdown atom's .bi-dropdown__item.
     Native options only honour `background-color`, `color`, `padding`, `font`
     and (Chrome 117+) `min-height` reliably across browsers; the OS-drawn
     selection highlight and popup border/shadow cannot be themed without
     either `appearance: base-select` support or a JS enhancement layer. */
  & .mwf-select option {
    min-height: 48px;
    padding: 12px;
    font-size: var(--bi-font-copy-s);
    font-family: inherit;
    line-height: var(--bi-line-height-tight);
    color: var(--bi-color-base-grey-550);
    background-color: var(--bi-color-container-white);
  }

  & .mwf-select option:checked {
    color: var(--bi-color-text-dark-grey);
    background-color: var(--bi-color-base-grey-050);
  }

  & .mwf-select option:disabled {
    color: var(--bi-color-base-grey-400);
  }

  /* Progressive enhancement: Chrome 130+ exposes the popup as a stylable
     DOM tree under `appearance: base-select`. Where supported, this lifts
     the native restrictions above and lets us match the atom listbox 1:1
     (height, border, selection highlight, hover ring). Browsers without
     support keep the limited native styling. */
  @supports (appearance: base-select) {
    & .mwf-select,
    & .mwf-select::picker(select) {
      appearance: base-select;
    }

    /* Chrome 130+ paints its own dropdown indicator on `appearance:
       base-select` selects. Hide it so our gradient chevron (the same
       two-triangle construction used by the Dropdown atom) is the only
       indicator — otherwise the two stack and produce a broken-looking
       jagged shape at the right edge. */
    & .mwf-select::picker-icon {
      display: none;
    }

    & .mwf-select::picker(select) {
      background-color: var(--bi-color-container-white);
      border: 1px solid var(--bi-color-brand-secondary);
      border-radius: var(--bi-radius-none);
      box-shadow: var(--bi-elevation-medium, 0 2px 8px rgba(0, 0, 0, 0.1));
      padding: 0;
      margin: 0;
    }

    & .mwf-select option {
      min-height: 48px;
      padding: 12px;
      border: none;
      color: var(--bi-color-base-grey-550);
      background-color: var(--bi-color-container-white);
    }

    & .mwf-select option:hover,
    & .mwf-select option:focus {
      color: var(--bi-color-text-black);
      background-color: var(--bi-color-base-grey-050);
      box-shadow:
        inset 1px 0 0 var(--bi-color-brand-secondary),
        inset -1px 0 0 var(--bi-color-brand-secondary),
        inset 0 -1px 0 var(--bi-color-brand-secondary);
    }

    & .mwf-select option:checked {
      color: var(--bi-color-text-dark-grey);
      background-color: var(--bi-color-base-grey-050);
    }
  }

  /* ── Fieldset (groups for radio + checkbox) ────────────────────── */
  & .mwf-input fieldset {
    /* reset native fieldset chrome */
    margin: 0;
    padding: 0;
    border: 0;
    /* layout */
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* dimensions */
    min-width: 0;
  }

  & .mwf-input:has(fieldset):has(.mwf-hint) .mwf-hint {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    background-color: var(--bi-color-text-dark-grey, #303030);
    color: #fff;
    padding: 4px 10px;
    font-size: var(--bi-font-copy-s);
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
  }

  & .mwf-input:has(fieldset):has(.mwf-hint) .mwf-hint p {
    margin: 0;
    color: inherit;
    font-size: inherit;
  }

  & .mwf-input:has(fieldset):has(.mwf-hint) .mwf-hint::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 10px;
    border: 4px solid transparent;
    border-top-color: var(--bi-color-text-dark-grey, #303030);
  }

  & .mwf-input:has(fieldset):has(.mwf-hint):hover .mwf-hint {
    opacity: 1;
  }

  /* ── Option wrapper (span around each radio/checkbox) ──────────── */
  & .mwf-option {
    display: block;
  }

  & .mwf-option > label {
    /* layout */
    display: flex;
    align-items: flex-start;
    gap: 8px;
    /* typography */
    font-size: var(--bi-font-copy-s);
    line-height: var(--bi-line-height-tight);
    /* color */
    color: var(--bi-color-text-black);
    /* spacing */
    margin: 0;
    /* behavior */
    cursor: pointer;
  }

  /* ── Checkbox option (matches Checkbox atom) ───────────────────── */
  & .mwf-checkbox {
    /* behavior */
    appearance: none;
    -webkit-appearance: none;
    /* position */
    position: relative;
    /* layout */
    flex-shrink: 0;
    /* dimensions */
    width: 20px;
    height: 20px;
    /* spacing */
    margin: 2px 0 0 0;
    padding: 0;
    /* border */
    border: none;
    border-radius: 0;
    /* color */
    background-color: var(--bi-color-brand-tertiary);
    /* background-color: var(--accessibility-color-blue-violet); */
    /* behavior */
    cursor: pointer;
    transition: var(--transition-base);
  }

  & .mwf-checkbox::before,
  & .mwf-radio::before {
    content: none !important;
    display: none !important;
    background-image: none !important;
  }

  & .mwf-checkbox,
  & .mwf-radio {
    float: none !important;
    margin-left: 0 !important;
    width: 20px !important;
    height: 20px !important;
    position: relative !important;
  }

  & .mwf-checkbox:checked,
  & .mwf-radio:checked {
    /* background-color: var(--bi-color-brand-tertiary) !important; */
    background-color: var(--accessibility-color-blue-violet) !important;
  }

  & .mwf-checkbox::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 3px;
    width: 16px;
    height: 14px;
    /* background-color: var(--bi-color-brand-secondary); */
    background-color: white;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5 8.5 6.5 12.5 13.5 4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5 8.5 6.5 12.5 13.5 4'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: 0;
    transition: opacity var(--transition-base);
  }

  & .mwf-checkbox:checked::after {
    opacity: 1;
  }

  & .mwf-checkbox:hover {
    background-color: var(--bi-color-brand-tertiary-hover);
  }

  & .mwf-checkbox:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--bi-color-focus-inner),
      0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
  }

  & .mwf-checkbox:disabled {
    background-color: var(--bi-color-container-grey);
    border: 1px solid var(--bi-color-base-grey-400);
    cursor: not-allowed;
  }

  /* ── Radio option (matches RadioButton atom) ──────────────────── */
  & .mwf-radio {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 2px 0 0 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* background-color: var(--bi-color-brand-tertiary); */
    background-color: var(--accessibility-color-blue-violet);
    cursor: pointer;
    transition: var(--transition-base);
  }

  & .mwf-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* background-color: var(--bi-color-brand-secondary); */
    background-color: white;
    transform: translate(-50%, -50%) scale(0);
    transition: transform var(--transition-base);
  }

  & .mwf-radio:checked::after {
    transform: translate(-50%, -50%) scale(1);
  }

  & .mwf-radio:hover {
    background-color: var(--bi-color-brand-tertiary-hover);
  }

  & .mwf-radio:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--bi-color-focus-inner),
      0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
  }

  & .mwf-radio:disabled {
    background-color: var(--bi-color-container-grey);
    border: 1px solid var(--bi-color-base-grey-400);
    cursor: not-allowed;
  }

  /* ── File upload ───────────────────────────────────────────────── *
   * The runtime renders a drop-zone (no equivalent in fc-*) plus a
   * "Datei auswählen" button. We style the dropzone as a dashed panel
   * matching our other empty/drop states and the button as the file-button
   * variant from the Seattle overrides. */
  /* ── File upload — IDW design (Figma 2025) ───────────────────────
   * Visual target:
   *   - One large dashed-bordered box containing the label (top-left)
   *     plus a centered upload prompt and a red pill button.
   *   - Hint text sits below the box (its natural sibling position).
   *   - When files are present, an "Alle Löschen" red pill sits in the
   *     same row as the hint (right-aligned).
   *
   * DOM constraint (jquery-webforms 1.8):
   *   .mwf-field
   *     > label.mwf-label       ← we lift this visually into .mwf-upload
   *     > .mwf-input
   *         > .mwf-upload           ← dashed box
   *             > .mwf-upload-dropzone (h3 + .mwf-upload-button)
   *             > .mwf-upload-filecontainer
   *         > .mwf-hint            ← stays below
   *
   * We can't restructure the DOM, so the label is pulled INTO the dashed
   * box via grid + a negative-margin trick on .mwf-field. */
  & .mwf-field:has(.mwf-upload) {
    /* turn the field into a grid so we can overlay the label on .mwf-input */
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bi-gap-medium);
  }

  & .mwf-field:has(.mwf-upload) > .mwf-label {
    /* sit on top-left inside .mwf-upload's dashed border (z-index over it) */
    position: absolute;
    top: 24px;
    left: 32px;
    margin: 0;
    z-index: 2;
    /* match the IDW upload-card label colour (dark slate, not the soft grey
       used for plain text inputs) */
    color: var(--bi-color-text-black);
    font-size: var(--bi-font-copy-s);
    font-weight: var(--bi-font-weight-regular);
  }

  /* The label sits absolutely-positioned inside the dashed box, where the
   * default 2px nudge on .mwf-required pushes the asterisk visually off
   * the label edge — flush is what the design wants here. */
  & .mwf-field:has(.mwf-upload) > .mwf-label .mwf-required {
    margin-left: 0;
  }

  & .mwf-upload {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* the dashed card lives here, encompassing the absolutely-positioned
       label and the centered dropzone content */
    position: relative;
    padding: 56px 24px 32px;
    border: 1px dashed var(--bi-color-text-dark-grey);
    border-radius: var(--bi-radius-none);
    background-color: var(--bi-color-container-white);
    transition: var(--transition-base);
  }

  /* Dragover state — jquery-webforms adds `mwf-upload-dragover` to
     the inner `.mwf-upload-dropzone` on dragover and removes it on
     dragleave/drop. Use `:has()` to surface that state on the parent
     dashed card so the whole component visually responds. */
  & .mwf-upload:has(.mwf-upload-dragover) {
    border-style: solid;
    border-color: var(--bi-color-button-primary);
    background-color: var(--bi-color-base-grey-100);
  }

  /* Drop target is just the inner `.mwf-upload-dropzone` element
     (heading + button area) — that's what jquery-webforms binds Blueimp
     to (form-check.html:171). `.mwf-upload-filecontainer` and any
     `.mwf-hint` are siblings, outside the drop area. */
  & .mwf-upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 0 16px;
    border: none;
    background: transparent;
    color: var(--bi-color-text-dark-grey);
    transition: var(--transition-base);
  }

  & .mwf-upload-dropzone h3 {
    margin: 0;
    font-family: inherit;
    /* uppercase, letter-spaced headline per the design */
    font-size: var(--bi-font-copy-s);
    font-weight: var(--bi-font-weight-regular);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bi-color-text-black);
  }

  & .mwf-upload-button {
    /* layout — red pill button, centered */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* spacing — generous horizontal pad, vertical matches button atom */
    padding: 14px 32px;
    /* border */
    border: none;
    border-radius: var(--bi-radius-full);
    /* color — IDW primary red */
    background-color: var(--bi-color-button-primary);
    color: var(--bi-color-button-primary-text, var(--bi-color-container-white));
    /* typography */
    font-family: inherit;
    font-size: var(--bi-font-copy-s);
    font-weight: var(--bi-font-weight-bold);
    /* behavior */
    cursor: pointer;
    transition: var(--transition-base);
  }

  & .mwf-upload-button:hover {
    background-color: var(--bi-color-button-primary-hover);
  }

  & .mwf-upload-button:active {
    background-color: var(--bi-color-button-primary-active);
  }

  /* The actual <input type="file"> sits inside the button — make it cover
     the button so the click area is correct, then hide it visually. */
  & .mwf-upload-button input[type='file'] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }

  & .mwf-upload-button input[type='file']:disabled {
    cursor: not-allowed;
  }

  /* File list — flex column inside the dropzone. Grows to fill the
     middle band of the card when files are present; collapses entirely
     when empty so the dropzone footer naturally pins to the bottom. */
  & .mwf-upload-filecontainer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 0 auto;
  }

  & .mwf-upload-filecontainer:empty {
    display: none;
  }

  /* ── Runtime-injected per-file row ──────────────────────────────── *
   * jquery-webforms (Blueimp) injects this DOM after a file is selected:
   *   .mwf-upload-row
   *     .mwf-upload-fileinfo
   *       .mwf-upload-preview    (thumbnail; falls back to a doc-icon SVG)
   *       .mwf-upload-metadata   (<ul> of "Name: ... / Größe: ...")
   *     .mwf-upload-actions      (the Löschen + Hochladen buttons)
   *     .mwf-upload-error        (orange error text on failure)
   *     .mwf-upload-progressbar
   * webforms_css.css gives Löschen/Hochladen grey/blue rectangle styles;
   * we re-skin them as IDW pills (Löschen = neutral grey, Hochladen = red
   * primary) to match `.mwf-upload-button`.
   */
  & .mwf-upload-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 24px;
    row-gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--bi-color-base-grey-200, var(--bi-color-base-grey-100));
  }

  & .mwf-upload-row:last-child {
    border-bottom: none;
  }

  & .mwf-upload-fileinfo {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0; /* allow long filenames to wrap */
  }

  & .mwf-upload-preview {
    flex: 0 0 auto;
    float: none; /* override legacy float: left */
    width: 80px;
    height: 80px;
    overflow: hidden; /* clip Blueimp's injected thumbnail */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* Blueimp's image plugin injects an <img> (or <canvas>) thumbnail up
     to `previewMaxWidth/Height` (120×120 per our data-mwf-fileupload
     config). Constrain it to fit the 80×80 container so the metadata
     beside it doesn't get overlapped. */
  & .mwf-upload-preview > img,
  & .mwf-upload-preview > canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  & .mwf-upload-metadata {
    flex: 1 1 auto;
    min-width: 0;
  }

  & .mwf-upload-metadata ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--bi-font-copy-s);
    color: var(--bi-color-text-dark-grey);
  }

  & .mwf-upload-metadata ul li {
    margin: 0;
    padding: 0;
    word-break: break-word;
  }

  & .mwf-upload-metadata ul li::before {
    content: none;
  }

  & .mwf-upload-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* keep buttons their natural height */
    align-self: center; /* don't stretch in the row flex */
    gap: 12px;
    width: auto; /* override legacy width: 100% */
    height: auto; /* override any runtime-set height */
  }

  /* Blueimp re-exposes the <input type="file"> alongside the per-file
     actions for "add more files". The native chooser bleeds through as
     "No file chosen" with no styling — hide it here; the original
     `.mwf-upload-button` above the row already covers the "add more"
     interaction via its absolutely-positioned overlay input. */
  & .mwf-upload-row input[type='file'],
  & .mwf-upload-actions input[type='file'] {
    display: none;
  }

  /* IDW pill base shared by Löschen + Hochladen. Overrides the
     `min-width: 120px` + grey/blue rectangles from webforms_css.css. */
  & .mwf-upload-delete,
  & .mwf-upload-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 10px 20px;
    border: none;
    border-radius: var(--bi-radius-full);
    font-family: inherit;
    font-size: var(--bi-font-copy-s);
    font-weight: var(--bi-font-weight-bold);
    cursor: pointer;
    transition: var(--transition-base);
  }

  & .mwf-upload-delete {
    background-color: var(--bi-color-text-dark-grey);
    color: var(--bi-color-base-white, var(--bi-color-container-white));
  }

  & .mwf-upload-delete:hover {
    background-color: var(--bi-color-text-black);
  }

  & .mwf-upload-upload {
    margin-left: 0; /* override legacy margin-left: 15px */
    background-color: var(--bi-color-button-primary);
    color: var(--bi-color-button-primary-text, var(--bi-color-container-white));
  }

  & .mwf-upload-upload:hover {
    background-color: var(--bi-color-button-primary-hover);
  }

  & .mwf-upload-upload:active {
    background-color: var(--bi-color-button-primary-active);
  }

  & .mwf-upload-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  & .mwf-upload-error {
    color: var(--bi-color-functional-error);
    font-size: var(--bi-font-copy-s);
    margin: 4px 0 0;
  }

  /* Blueimp injects an empty `.mwf-upload-error` div in every file row
     even when there's no error yet; with the row's `column-gap: 24px`
     this phantom item shifts the action buttons 24px left of the row's
     right edge, breaking alignment with the footer's Alle Löschen.
     Collapse it until it actually has content. */
  & .mwf-upload-row .mwf-upload-error:empty,
  & .mwf-upload-row .mwf-upload-progressbar:empty {
    display: none;
  }

  /* ── Captcha ──────────────────────────────────────────────────── *
   * Real markup (form-check.html L2052-2065) is just an <a> wrapping
   * an <img>, then an <input>, inside .mwf-input. There are no extra
   * classes — we target structural selectors only. */
  & .mwf-field.mwf-captcha .mwf-input {
    flex-direction: column;
    gap: var(--bi-gap-medium);
  }

  & .mwf-field.mwf-captcha .mwf-input > a {
    display: inline-block;
    width: fit-content;
    align-self: center;
    border: 1px solid var(--bi-color-base-grey-400);
    background-color: var(--bi-color-base-grey-100);
    padding: 8px;
  }

  & .mwf-field.mwf-captcha .mwf-input > a img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* ── Buttons (match .bi-button--primary atom: red pill, fit-content) ── */
  & .mwf-button {
    /* The runtime emits the button as <li class="mwf-button mwf-next">.
       Reset list chrome and let the <input> inside paint the actual button. */
    list-style: none;
    margin: 0;
    padding: 0;
    width: fit-content;
  }

  /* The bundle CSS targets the modern markup where `.mwf-button` is on the
     <button> element itself, painting a dark slate `#2d3748` background on
     hover/focus. Our captured form has `.mwf-button` on the <li> wrapper, so
     that rule paints a dark rectangle around the actual button. Reset it. */
  & .mwf-button:hover,
  & .mwf-button:focus {
    background: transparent;
    color: inherit;
    outline: none;
  }

  & .mwf-button input[type='button'],
  & .mwf-button input[type='submit'] {
    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* dimensions */
    width: fit-content;
    min-height: 40px;
    /* spacing */
    padding: 0 32.5px;
    gap: 5px;
    /* border */
    border: none;
    border-radius: var(--bi-radius-full);
    /* color */
    background-color: var(--bi-color-button-primary);
    color: var(--bi-color-button-primary-text);
    /* typography */
    font-family: inherit;
    font-size: var(--bi-font-copy-s);
    font-weight: var(--bi-font-weight-semibold);
    line-height: var(--bi-line-height-tight);
    letter-spacing: 0;
    /* behavior */
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-base);
  }

  & .mwf-button input[type='button']:hover,
  & .mwf-button input[type='submit']:hover {
    background-color: var(--bi-color-button-primary-hover);
  }

  & .mwf-button input[type='button']:active,
  & .mwf-button input[type='submit']:active {
    background-color: var(--bi-color-button-primary-active);
  }

  & .mwf-button input[type='button']:focus,
  & .mwf-button input[type='submit']:focus {
    outline: none;
  }

  & .mwf-button input[type='button']:focus-visible,
  & .mwf-button input[type='submit']:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--bi-color-focus-inner),
      0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
  }

  & .mwf-button input[type='button']:disabled,
  & .mwf-button input[type='submit']:disabled {
    cursor: not-allowed;
    background-color: var(--bi-color-base-grey-400);
    color: var(--bi-color-container-white);
  }

  & .mwf-button.mwf-next input[type='button'] {
    background: var(--bi-color-button-primary) !important;
    color: var(--bi-color-button-primary-text) !important;
    border-radius: var(--bi-radius-full) !important;
    border: none !important;
    padding: 0 32.5px !important;
    min-height: 40px !important;
    font-size: var(--bi-font-copy-s) !important;
    font-weight: var(--bi-font-weight-semibold) !important;
    cursor: pointer !important;
    transition: var(--transition-base) !important;
  }

  & .mwf-button.mwf-next input[type='button']:hover {
    background: var(--bi-color-button-primary-hover) !important;
  }

  /* Back / cancel — filled neutral button (CMS compatibility override) */
  & .mwf-button.mwf-back input[type='button'],
  & .mwf-button.mwf-cancel input[type='button'] {
    background: var(--bi-color-base-grey-550) !important;
    color: var(--bi-color-text-white) !important;
    border-radius: var(--bi-radius-full) !important;
    border: none !important;
    padding: 0 32.5px !important;
    min-height: 40px !important;
    font-size: var(--bi-font-copy-s) !important;
    font-weight: var(--bi-font-weight-semibold) !important;
    cursor: pointer !important;
    transition: var(--transition-base) !important;
  }

  & .mwf-button.mwf-back input[type='button']:hover,
  & .mwf-button.mwf-cancel input[type='button']:hover {
    background: var(--bi-color-brand-grey-active) !important;
    color: var(--bi-color-text-white) !important;
  }

  & .mwf-button.mwf-back input[type='button']:active,
  & .mwf-button.mwf-cancel input[type='button']:active {
    background: var(--bi-color-brand-grey-active) !important;
    color: var(--bi-color-text-white) !important;
  }

  /* ── Pager (the "1/2" page indicator unique to mwf-*) ─────────── */
  & .mwf-pager {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  & .mwf-pager p {
    margin: 0;
    font-size: var(--bi-font-copy-s);
    color: var(--bi-color-brand-grey-mid);
  }

  & .mwf-pager span {
    font-weight: var(--bi-font-weight-semibold);
    color: var(--bi-color-text-dark-grey);
  }

  /* ── Field state styling ──────────────────────────────────────── *
   * jquery-webforms adds state classes at runtime but we don't have
   * confirmed names from the CMS team, so don't target them. Standard
   * CSS pseudo-classes (`:focus-within`, `:invalid`, …) cover the
   * common interactive states without needing runtime help. */
  & .mwf-field:focus-within .mwf-text:not(textarea),
  & .mwf-field:focus-within textarea.mwf-text,
  & .mwf-field:focus-within .mwf-input input,
  & .mwf-field:focus-within .mwf-input textarea,
  & .mwf-field:focus-within .mwf-select {
    border-color: var(--bi-color-brand-secondary);
  }

  /* ── Field width helpers (shared with fc-*) ───────────────────── */
  & .mwf-field.mwf-s {
    max-width: 240px;
  }

  & .mwf-field.mwf-m {
    max-width: 360px;
  }

  & .mwf-field.mwf-l {
    max-width: 560px;
  }
}
/* ORGANISMS */
/* Footer Component Variables */
:root {
  --footer-content-width: 544px;
  --footer-navigation-width: 750px;
}
/* Footer Wrapper */
.bi-footer-wrapper {
  /* layout */
  position: relative;
  /* dimensions */
  width: 100%;
  /* color */
  background-color: var(--bi-color-container-secondary);

  /* Footer Container */
  .bi-footer {
    /* layout */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* dimensions */
    width: 100%;
    /* spacing */
    padding: 51px 24px;
    /* color */
    background-color: var(--bi-color-container-secondary);
    color: var(--bi-color-base-white);
    /* other */
    box-sizing: border-box;
    isolation: isolate;

    /* === Mobile View (Accordion) === */

    .bi-footer-content-mobile {
      /* layout */
      display: block;
      /* dimensions */
      width: 100%;
    }

    /* Override base Accordion styles so footer mobile keeps dark background and layout */
    .bi-footer-accordion.bi-accordion {
      /* color: prevent base .bi-accordion white background from covering footer */
      background-color: transparent;
      /* dimensions */
      width: 100%;
    }

    .bi-footer .bi-accordion-item {
      /* spacing: remove base AccordionItem margin that breaks footer layout */
      margin: 0;
    }

    .bi-footer-accordion-item {
      &:focus-visible {
        outline: 2px solid var(--bi-color-focus);
        outline-offset: 2px;
      }

      .bi-accordion-item__trigger {
        /* color */
        color: var(--bi-color-text-white);
      }

      .bi-accordion-item__trigger-text {
        /* typography */
        white-space: pre-line;
      }

      .bi-accordion-item__trigger-icon {
        /* color */
        color: var(--bi-color-text-white);
      }

      .bi-accordion-item__description {
        /* color */
        color: var(--bi-color-text-white);
        /* spacing: override base AccordionItem padding for footer mobile layout */
        padding: 27px 16px 0 16px;
      }

      &:not(:last-child) .bi-accordion-item__description {
        /* spacing */
        padding-bottom: 40px;
      }

      .bi-footer-communication {
        /* color */
        color: var(--bi-color-text-white);
      }

      .bi-footer-organization__social {
        /* spacing */
        margin-top: 16px;
      }
    }

    /* Accordion item overrides within footer */
    .bi-accordion-item {
      /* border */
      border-bottom: none;

      .bi-accordion-item__trigger {
        /* border */
        border-bottom: var(--bi-border-width) solid
          var(--bi-color-border-medium-grey);
        /* spacing */
        padding: 16px 16px;
      }

      .bi-accordion-item__trigger-text {
        /* typography */
        font-size: 18px;
        letter-spacing: 0;
      }

      &.bi-accordion-item--open .bi-accordion-item__trigger-text {
        font-weight: var(--bi-font-weight-semibold);
      }
    }

    .bi-social-link {
      /* border */
      border-radius: 0;
    }

    /* === Desktop View === */

    .bi-footer-content-desktop {
      /* layout */
      display: none;
      /* dimensions */
      width: 100%;
    }

    .bi-footer-communication-wrapper {
      /* layout */
      display: flex;
      flex-direction: column;
      /* dimensions */
      width: 100%;
      /* spacing */
      margin-bottom: 45px;
      gap: 15px;
    }

    /* === Shared Organization Styles === */

    .bi-footer-organization__name {
      /* typography */
      font-weight: 700;
      font-size: 18px;
      line-height: var(--bi-line-height-tight);
      white-space: pre-line;
    }

    .bi-footer-organization__social {
      /* layout */
      display: flex;
      align-items: flex-start;
      /* spacing */
      column-gap: 30px;
    }

    .bi-footer-organization__links {
      /* layout */
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      /* typography */
      font-size: 18px;
      /* spacing */
      margin-top: 26px;
      gap: 14px;
    }

    .bi-footer-organization-link {
      /* typography */
      cursor: pointer;
      line-height: 80%;

      &:hover,
      &:active {
        /* text decoration */
        text-decoration: underline;
      }

      &:focus {
        outline: none;
      }

      &:focus-visible {
        outline: 2px solid var(--bi-color-focus);
        outline-offset: 2px;
      }
    }

    /* === Communication Styles === */

    .bi-footer-communication {
      /* layout */
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      /* spacing */
      gap: 12px;
    }

    .bi-footer-communication__phone,
    .bi-footer-communication__fax,
    .bi-footer-communication__email {
      /* layout */
      display: flex;
      align-items: center;
      /* typography */
      font-size: 18px;
      /* spacing */
      gap: 8px;
      padding: 0;
    }

    .bi-footer-communication__icon {
      /* typography */
      font-size: 24px;
    }

    .bi-footer-communication__email-link {
      /* color */
      color: inherit;
      /* typography */
      text-decoration: none;

      &:hover,
      &:active {
        text-decoration: underline;
      }

      &:focus {
        outline: none;
      }

      &:focus-visible {
        outline: 2px solid var(--bi-color-focus);
        outline-offset: 2px;
      }
    }

    /* === Address Section === */

    .bi-footer-address-wrapper {
      /* layout */
      display: flex;
      /* dimensions */
      width: 100%;
      /* spacing */
      margin: 54px 24px 70px 58px;
      /* typography */
      font-style: normal;
    }

    .bi-footer-address {
      /* layout */
      display: flex;
      flex-direction: column;
      /* typography */
      font-size: 18px;
      letter-spacing: 1px;
    }

    .bi-footer-address__label {
      /* typography */
      font-weight: var(--bi-font-weight-semibold);
      line-height: 80%;
      letter-spacing: var(--bi-letter-spacing-normal);
      /* spacing */
      margin-bottom: 20px;
    }

    .bi-footer-address__value {
      /* typography */
      font-weight: var(--bi-font-weight-regular);
      line-height: 80%;
      letter-spacing: var(--bi-letter-spacing-normal);
    }

    /* === Footer Links === */

    .bi-footer-links {
      /* layout */
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      /* dimensions */
      width: 100%;
      /* typography */
      font-size: 18px;
      text-align: center;
      /* spacing */
      gap: 15px 0;
    }

    /* === Copyright === */

    .bi-footer-copyright {
      /* color */
      color: var(--bi-color-text-white);
      /* spacing */
      margin-top: 28px;
      /* typography */
      text-align: center;
      font-size: 10px;
      letter-spacing: 0.5px;
      font-weight: var(--bi-font-weight-thin);
    }
  }

  /* Logo (outside footer, positioned absolutely) */
  .bi-footer-logo {
    /* layout */
    display: none;

    .bi-footer-logo__link {
      display: block;

      &:focus {
        outline: none;
      }

      &:focus-visible {
        outline: 2px solid var(--bi-color-focus);
        outline-offset: 2px;
      }
    }

    .bi-footer-logo__image {
      /* layout */
      display: block;
      /* dimensions */
      width: 145.34px;
      height: 94.78px;
      /* other */
      object-fit: cover;
      object-position: top left;
    }
  }
}
/* Desktop Styles (min-width: 1200px) */
@media (min-width: 1200px) {
  .bi-footer-wrapper {
    .bi-footer {
      /* spacing */
      padding: 100px 0 60px;
      gap: 0;

      .bi-footer-content-mobile {
        /* layout */
        display: none;
      }

      .bi-footer-content-desktop {
        /* layout */
        display: block;
        /* spacing */
        margin-bottom: 45px;
      }

      .bi-footer-content-desktop__wrapper {
        /* layout */
        display: flex;
        flex-direction: column;
        align-items: start;
        /* dimensions */
        width: 100%;
        max-width: 1120px;
        /* spacing */
        margin: 0 auto;
      }

      .bi-footer-desktop-names-wrapper {
        /* layout */
        display: flex;
        flex-direction: column;
        /* dimensions */
        width: 100%;
        /* spacing */
        margin-bottom: 58px;
        gap: 16px;
      }

      .bi-footer-desktop-row {
        /* layout */
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* dimensions */
        width: 100%;
        /* spacing */
        gap: 32px;
      }

      .bi-footer-organization__name {
        /* dimensions */
        max-width: 300px;
        /* typography */
        line-height: 1.2;
        letter-spacing: var(--bi-letter-spacing-normal);
        font-weight: var(--bi-font-weight-semibold);
        white-space: normal;
        word-wrap: break-word;
      }

      .bi-footer-communication {
        /* layout */
        align-items: flex-start;
        /* typography */
        text-align: left;
        /* spacing */
        gap: 32px;
      }

      .bi-footer-communication__phone,
      .bi-footer-communication__fax,
      .bi-footer-communication__email {
        /* layout */
        justify-content: flex-start;
        /* typography */
        font-size: var(--bi-font-size-md);
      }

      .bi-footer-organization__social {
        /* spacing */
        margin-top: 0;
      }

      .bi-footer-organization__links {
        /* spacing */
        margin-top: 0;
      }

      .bi-footer-address-wrapper {
        /* layout */
        justify-content: center;
        /* spacing */
        margin: 24px 0 24px 0;
      }

      .bi-footer-address__label {
        /* spacing */
        margin-left: -20px;
      }

      .bi-footer-address {
        /* layout */
        flex-direction: row;
        /* spacing */
        gap: 8px;
        margin: 0 auto;
        /* dimensions */
        max-width: var(--footer-navigation-width);
      }

      .bi-footer-links {
        /* dimensions */
        max-width: var(--footer-navigation-width);
        /* spacing */
        margin: 0 auto;

        .bi-footer-link {
          /* typography */
          font-size: var(--bi-font-copy-m);
        }
      }
    }

    .bi-footer-logo {
      /* layout */
      display: block;
      position: absolute;
      /* spacing */
      top: 96px;
      right: 0;
    }
  }
}
/* NavigationBar component - Main navigation bar organism */
/* Wrapper container */
.bi-navigation-bar-wrapper {
  /* dimensions */
  width: 100%;
  /* color */
  background-color: var(--bi-color-container-secondary);
}
/* Main navigation bar */
.bi-navigation-bar {
  /* position */
  position: fixed;
  z-index: var(--bi-z-index-header);
  width: 100%;
  /* CSS variables */
  --navigation-bar-height: 56px;
}
/* Mobile Layout - Standalone */
.bi-navigation-bar__mobile {
  /* layout */
  display: block;
  width: 100%;

  /* Mobile header */
  .bi-navigation-bar__mobile-header {
    /* layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* dimensions */
    width: 100%;
    height: var(--navigation-bar-height);
    /* spacing */
    padding: 0 17px 0 24px;
    /* color */
    background-color: var(--bi-color-container-white);
    /* position */
    position: relative;
    z-index: calc(var(--bi-z-index-header) + 1);
  }

  /* Toggle icon - always black on white header */
  .bi-navigation-bar__mobile-header .bi-navigation-bar__mobile-toggle {
    color: var(--bi-color-base-black);
  }
}
/* Desktop Layout - Standalone */
.bi-navigation-bar__desktop {
  /* layout */
  display: none;
  width: 100%;

  /* Desktop container - Two column flex layout */
  .bi-navigation-bar__desktop-container {
    /* layout */
    display: flex;
    align-items: start;
    /* dimensions */
    width: 100%;
    height: var(--navigation-bar-height);
    /* spacing */
    padding: 0;
  }

  /* Column left - Logo only */
  .bi-navigation-bar__desktop-column-left {
    /* layout */
    display: flex;
    align-items: center;
    /* dimensions */
    height: 100%;
  }

  /* Column right - Flex column with utilities and nav items */
  .bi-navigation-bar__desktop-column-right {
    /* layout */
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    /* dimensions */
    height: 100%;
  }

  /* Main navigation on desktop */
  .bi-navigation-bar__nav--desktop {
    /* layout */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* spacing */
    margin-bottom: 10px;
    /* dimensions */
    /* height: 60px; */
  }
}
/* Desktop styles - white nav bar per Figma */
@media (min-width: 1200px) {
  .bi-navigation-bar-wrapper {
    /* position - sticky so header stays at top when scrolling */
    position: sticky;
    top: 0;
    z-index: var(--bi-z-index-header);
    /* color */
    background-color: var(--bi-color-container-white);
  }

  .bi-navigation-bar {
    /* CSS variables */
    --navigation-bar-height: 117px;
    /* position - static within sticky wrapper */
    position: static;
    /* spacing */
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    /* color */
    background-color: var(--bi-color-container-white);
  }

  /* Hide mobile layout on desktop */
  .bi-navigation-bar__mobile {
    /* layout */
    display: none;
  }

  /* Show desktop layout on desktop */
  .bi-navigation-bar__desktop {
    /* layout */
    display: block;
  }
}
/* NotificationBar — fixed message strip pinned directly under the navigation
   header. Does not reserve flow space; the offset matches the nav height for
   each breakpoint so the bars sit just below the header rather than overlaying it. */
/* Navigation header height — mirrors the values defined in
   navigationBar.css (.bi-navigation-bar --navigation-bar-height). Kept local
   so we can offset notifications without exposing an additional global token. */
.bi-notification-bar-stack,
.bi-notification-bar {
  --bi-notification-bar-offset: 56px;
}
@media (min-width: 1200px) {
  .bi-notification-bar-stack,
  .bi-notification-bar {
    --bi-notification-bar-offset: 117px;
  }
}
/* Stack wrapper — host for multiple bars rendered together (CMS or template).
   When bars are inside this wrapper, they stack vertically in normal flow
   while the wrapper provides the fixed overlay anchor. */
.bi-notification-bar-stack {
  /* position */
  position: fixed;
  top: var(--bi-notification-bar-offset);
  left: 0;
  right: 0;
  z-index: var(--bi-z-index-header);
  /* layout */
  display: flex;
  flex-direction: column;
}
.bi-notification-bar {
  /* position — standalone bars sit directly under the nav header. */
  position: fixed;
  top: var(--bi-notification-bar-offset);
  left: 0;
  right: 0;
  z-index: var(--bi-z-index-header);
  /* dimensions */
  width: 100%;
}
/* Inside the stack, bars revert to normal flow so the wrapper handles
   positioning and they stack naturally underneath each other. */
.bi-notification-bar-stack .bi-notification-bar {
  position: relative;
  inset: auto;
  z-index: auto;
}
.bi-notification-bar--hidden {
  display: none;
}
/* Variant backgrounds — override the default light container tokens with the
   saturated functional colors. Text and icon paint black. */
.bi-notification-bar.bi-container-message {
  background-color: var(--bi-color-functional-message);
  color: var(--bi-color-text-black);
}
.bi-notification-bar.bi-container-success {
  background-color: var(--bi-color-functional-success);
  color: var(--bi-color-text-black);
}
.bi-notification-bar.bi-container-warning {
  background-color: var(--bi-color-functional-warning);
  color: var(--bi-color-text-black);
}
.bi-notification-bar.bi-container-error {
  background-color: var(--bi-color-functional-error);
  color: var(--bi-color-text-black);
}
.bi-notification-bar .bi-notification-bar__icon,
.bi-notification-bar .bi-notification-bar__content {
  color: var(--bi-color-text-black);
}
.bi-notification-bar__container {
  /* layout */
  display: flex;
  align-items: center;
  gap: var(--bi-padding-small);
  /* spacing */
  padding: var(--bi-padding-small) var(--bi-container-padding-small);
}
.bi-notification-bar__icon {
  /* dimensions */
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1.5;
}
.bi-notification-bar__content {
  /* layout */
  display: flex;
  flex: 1;
  flex-direction: column;
  /* typography */
  font-family: var(--bi-font-family-primary);
  font-size: var(--bi-font-copy-m);
  line-height: var(--bi-line-height-tight);
  word-break: break-word;
  hyphens: auto;
}
.bi-notification-bar__line {
  /* leave the row in flow even if empty so the 2-line slot stays reserved */
  min-height: 1em;
}
/* Confirm button — pill outline in black to match the bar's text and icon
   color. Overrides `.bi-button--secondary` (text-link styled) inside the
   notification context. */
.bi-notification-bar .bi-notification-bar__confirm {
  /* layout */
  flex-shrink: 0;
  align-self: center;
  /* spacing */
  padding: 6px 20px;
  /* border */
  border: 1px solid var(--bi-color-text-black);
  border-radius: var(--bi-radius-full);
  /* color */
  background-color: transparent;
  color: var(--bi-color-text-black);
}
.bi-notification-bar .bi-notification-bar__confirm:hover {
  background-color: rgba(0, 0, 0, 0.08);
  color: var(--bi-color-text-black);
}
.bi-notification-bar .bi-notification-bar__confirm:active {
  background-color: rgba(0, 0, 0, 0.16);
}
/* Mobile: stack the button below the text so it doesn't get squeezed */
@media (max-width: 768px) {
  .bi-notification-bar__container {
    flex-direction: column;
    align-items: stretch;
  }

  .bi-notification-bar__icon {
    align-self: flex-start;
  }

  .bi-notification-bar__confirm {
    align-self: flex-start;
  }
}
/* Newsletter Styles */
.bi-newsletter {
  z-index: var(--bi-z-index-newsletter);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  background-color: var(--bi-color-container-white);
  box-shadow: var(--bi-elevation-big);
  border-radius: 24px;

  .bi-newsletter__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    margin-top: 26px;
  }

  .bi-title {
    position: relative;
    width: 100%;
  }

  .bi-newsletter__form {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Visually hidden label for accessibility */
  .bi-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Block: Newsletter Checkbox */
  .bi-newsletter__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    width: 100%;
  }

  /* Element: Checkbox Input */
  .bi-newsletter__checkbox-input {
    margin: 2px 0 0 0;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: var(--bi-color-checkbox-background);
    border: var(--bi-stroke-thin) solid var(--bi-color-text-dark-grey);
    border-radius: 2px;
    cursor: pointer;
    appearance: none;
    position: relative;
  }

  .bi-newsletter__checkbox-label {
    cursor: pointer;
  }

  /* Checkmark (pseudo-element for checked state) */
  .bi-newsletter__checkbox-input:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 13px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10' fill='none'%3E%3Cpath d='M10.3271 0.310204C10.5384 0.109038 10.8196 -0.00217519 11.1113 3.2243e-05C11.403 0.00223967 11.6825 0.117695 11.8907 0.322036C12.099 0.526377 12.2197 0.803621 12.2274 1.09527C12.2351 1.38691 12.1292 1.67015 11.9321 1.8852L5.94706 9.37021C5.84415 9.48105 5.71994 9.57001 5.58186 9.63175C5.44378 9.6935 5.29467 9.72677 5.14344 9.72957C4.99221 9.73237 4.84197 9.70465 4.7017 9.64805C4.56143 9.59146 4.43401 9.50717 4.32706 9.4002L0.358063 5.4312C0.247532 5.32821 0.158879 5.20401 0.0973912 5.06601C0.0359033 4.92801 0.00284026 4.77904 0.00017508 4.62799C-0.0024901 4.47693 0.0252972 4.32689 0.0818787 4.18681C0.13846 4.04673 0.222677 3.91948 0.329505 3.81265C0.436333 3.70582 0.563584 3.6216 0.703666 3.56502C0.843749 3.50844 0.993792 3.48065 1.14485 3.48332C1.2959 3.48598 1.44487 3.51905 1.58287 3.58053C1.72087 3.64202 1.84507 3.73067 1.94806 3.8412L5.08906 6.9807L10.2986 0.343205C10.3079 0.331656 10.318 0.320639 10.3286 0.310204H10.3271Z' fill='%232C2C2C'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .bi-newsletter__button-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0;
    gap: 8px;
    align-self: flex-end;
  }
}
/* Tablet and Desktop Styles */
@media (min-width: 1200px) {
  .bi-newsletter {
    padding: 40px 0;
    max-width: var(--footer-newsletter-width-desktop);

    .bi-title {
      flex-direction: row;
      align-items: center;
      width: var(--footer-content-width);
    }

    .bi-newsletter__content {
      width: var(--footer-content-width);
      gap: 18px;
    }
  }
}
/* StagePublication content styles */
.bi-stage-publication {
  /* Make the Card a flex column to space inner elements */
  .bi-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Category label */
  .bi-card__category {
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-semibold);
    font-size: var(--bi-font-label-s);
    line-height: var(--bi-line-height-mini);
    letter-spacing: 1.28px;
    color: var(--bi-color-brand-primary);
  }

  /* Headline */
  .bi-card__headline {
    /* spacing */
    margin: 0;
  }

  /* Headline link */
  .bi-card__headline-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      color: var(--bi-color-brand-secondary-hover);
    }

    &:active {
      color: var(--bi-color-brand-secondary-active);
    }

    &:focus-visible {
      outline: 2px solid var(--bi-color-focus);
      outline-offset: 2px;
    }
  }

  /* Description */
  .bi-card__description {
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-regular);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
  }

  /* Button wrapper */
  .bi-card__button {
    display: flex;
  }
}
@media (min-width: 1200px) {
  .bi-stage-publication .bi-card__headline {
    /* h1 desktop font-size comes from typography.css */
  }
}
/* StageSlider component styles */
:root {
  /* Pause cursor shown briefly on content card click */
  --bi-cursor-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16'%3E%3Cpath fill='%232c2c2c' d='M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5m5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5'/%3E%3C/svg%3E")
    12 12;

  --bi-width-stage-slider: 928px;
  --bi-width-stage-card-content: 608px;
  --bi-height-stage-image-desktop: 400px;
  --bi-height-stage-image-desktop-start: 650px;
  --bi-stage-picture-height-mobile: 351px;
  --bi-stage-picture-height-mobile-start: 351px;
  --bi-stage-content-margin-top-desktop: -185px;
  --bi-stage-content-margin-top-desktop-start: -122px;
}
/* ===== MOBILE (default) ===== */
.bi-stage-slider {
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* dimensions */
  width: 100%;

  /* Viewport */
  .bi-card__viewport {
    /* dimensions */
    width: 100%;
    /* overflow */
    overflow-x: hidden;
  }

  /* Track */
  .bi-card__track {
    /* layout */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    /* spacing */
    gap: 0;
  }

  /* Slide content wrapper */
  .bi-card__slide-content {
    /* layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* dimensions */
    width: 100%;
  }

  /* Non-active slides: truly hidden so assistive tech and contrast
     checkers ignore off-screen content. The JS already toggles
     aria-hidden when slides become active/inactive. */
  .bi-card__slide[aria-hidden='true'] {
    visibility: hidden;
  }

  .bi-card__slide {
    visibility: visible;
    transition: visibility 0s;
  }

  .bi-card__slide[aria-hidden='true'] {
    transition: visibility 0s 300ms;
  }

  /* Picture container */
  .bi-card__picture {
    /* dimensions */
    width: 100%;
    height: var(--bi-stage-picture-height-mobile);
  }

  .bi-card__slide--start .bi-card__picture {
    /* dimensions */
    height: var(--bi-stage-picture-height-mobile-start);
  }

  /* Picture image */
  .bi-card__img {
    /* dimensions */
    width: 100%;
    height: 100%;
    /* media */
    object-fit: cover;
  }

  /* Content card – pause icon only during click (toggle pause/resume) */
  .bi-card__content-card {
    /* position */
    position: relative;
    z-index: var(--bi-z-index-stage-content);
    /* dimensions */
    width: calc(100% - 48px);
    max-width: var(--bi-width-stage-card-content);
    /* spacing */
    margin-top: -71px;
    margin-left: auto;
    margin-right: auto;
    /* visual */
    background-color: var(--bi-color-container-white, #fff);
    cursor: pointer;
  }

  /* During click: briefly show pause icon (both when pausing and resuming) */
  .bi-card__content-card:active:not(:has(a:active)):not(:has(button:active)) {
    cursor: var(--bi-cursor-pause), pointer;
  }

  /* Badge – hidden by default (placed directly in the content card) */
  .bi-card__content-card .bi-badge {
    display: none;
    position: absolute;
    top: -8px;
    right: 20px;
  }

  /* Badge visible when content card has --with-badge modifier */
  .bi-card__content-card.bi-card--with-badge .bi-badge {
    display: flex;
  }

  /* Desktop arrows — hidden on mobile */
  .bi-card__arrow {
    /* layout */
    display: none;
  }

  /* Desktop dots inside card — hidden on mobile */
  .bi-card__dots {
    /* layout */
    display: none;
  }

  /* Card content */
  .bi-card__content {
    /* layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* dimensions */
    width: 100%;
    /* spacing */
    gap: 11px;
    padding: 32px 16px;
  }

  /* Headline */
  .bi-card__headline {
    /* layout */
    flex: 0 1 auto;
    /* spacing */
    margin: 0;
  }

  /* Headline link */
  .bi-card__headline-link {
    /* typography */
    color: inherit;
    text-decoration: none;
    /* visual */
    cursor: pointer;

    &:hover {
      color: var(--bi-color-brand-secondary-hover);
    }

    &:active {
      color: var(--bi-color-brand-secondary-active);
    }

    &:focus-visible {
      outline: 2px solid var(--bi-color-focus);
      outline-offset: 2px;
    }
  }

  /* Category label (start variant) */
  .bi-card__category {
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-semibold);
    font-size: var(--bi-font-label-s);
    line-height: var(--bi-line-height-mini);
    letter-spacing: 1.28px;
    color: var(--bi-color-brand-primary);
  }

  /* Event date */
  .bi-card__description--small {
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-bold);
    font-size: var(--bi-font-size-md);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
  }

  /* Event location */
  .bi-card__description--icon {
    /* layout */
    display: flex;
    align-items: center;
    /* spacing */
    gap: 8px;
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-regular);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    color: var(--bi-color-text-dark-grey);
  }

  /* Event category chips */
  .bi-card__categories {
    /* layout */
    display: flex;
    flex-wrap: wrap;
    /* spacing */
    gap: 8px;
  }

  /* Button inside card */
  .bi-card__content .bi-button {
    /* layout */
    align-self: flex-start;

    &.bi-button--primary {
      /* dimensions */
      min-height: 48px;
    }
  }

  /* ===== Pagination (mobile: arrows + dots on one line) ===== */
  .bi-card__pagination {
    /* spacing */
    padding-top: 4px;
  }

  .bi-card__pagination-nav {
    /* layout */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    /* dimensions */
    width: 100%;
    /* spacing */
    gap: 5px;
  }

  .bi-card__pagination-nav > * {
    /* layout */
    flex-shrink: 0;
  }

  /* Prev/next buttons */
  .bi-card__prev,
  .bi-card__next {
    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* spacing */
    padding: 0;
    /* visual */
    cursor: pointer;
    transition: all 0.2s ease;

    &:focus-visible {
      /* visual */
      outline: none;
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
    }
  }

  .bi-card__prev .bi-button__icon {
    /* visual */
    transform: rotate(180deg);
  }

  .bi-card__prev .bi-button__icon .bi-custom-icon,
  .bi-card__next .bi-button__icon .bi-custom-icon {
    /* layout */
    display: block;
    /* typography */
    color: var(--bi-color-icon-grey-light);
  }

  .bi-card__prev:active .bi-button__icon .bi-custom-icon,
  .bi-card__next:active .bi-button__icon .bi-custom-icon {
    /* typography */
    color: var(--bi-color-background-dark-grey);
    /* visual */
    transition: all 0.5s ease;
  }

  /* Pagination dots container */
  .bi-pagination-module__dots {
    /* layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* position */
    position: relative;
    /* dimensions */
    width: fit-content;
    min-width: 32px;
    height: 8px;
    min-height: 8px;
    /* spacing */
    gap: 2.8px;
    /* overflow */
    overflow: visible;
    /* visual */
    box-sizing: border-box;
  }

  /* Individual dot */
  .bi-pagination-module__dot {
    /* layout */
    display: block;
    flex-shrink: 0;
    /* position */
    position: relative;
    /* dimensions */
    width: 6.9px;
    height: 6.9px;
    /* visual */
    background-color: var(--bi-color-icon-grey-light);
    border-radius: 50%;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
  }

  /* Active dot */
  .bi-pagination-module__dot--active {
    /* visual */
    background-color: var(--bi-color-button-secondary);
  }
}
/* ===== Tablet (768px+) ===== */
@media (min-width: 768px) {
  .bi-stage-slider {
    .bi-card__content-card {
      /* dimensions */
      max-width: var(--bi-width-stage-card-content);
    }
  }
}
/* ===== Desktop (1200px+) ===== */
@media (min-width: 1200px) {
  .bi-stage-slider {
    /* position */
    position: relative;

    .bi-card__picture {
      /* dimensions */
      height: var(--bi-height-stage-image-desktop);
    }

    .bi-card__slide--start .bi-card__picture {
      /* dimensions */
      height: var(--bi-height-stage-image-desktop-start);
    }

    .bi-card__content-card {
      /* layout */
      display: flex;
      flex-direction: row;
      align-items: center;
      /* dimensions */
      width: 100%;
      max-width: var(--bi-width-stage-slider);
      min-height: 243px;
      /* spacing */
      margin-top: var(--bi-stage-content-margin-top-desktop);
    }

    .bi-card__slide--start .bi-card__content-card {
      /* spacing */
      margin-top: var(--bi-stage-content-margin-top-desktop-start);
    }

    .bi-card__content-card.bi-card--with-badge .bi-badge {
      /* position */
      top: -18px;
      right: 19px;
    }

    .bi-card__arrow {
      /* layout */
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      /* spacing */
      padding: 0 16px;
    }

    .bi-card__arrow .bi-button--icon-only {
      /* dimensions */
      width: 26px;
      height: 49px;
      max-width: 26px;
      max-height: 49px;

      &:hover .bi-button__icon .bi-custom-icon {
        /* typography */
        color: var(--bi-color-brand-grey-hover);
      }

      &:active .bi-button__icon .bi-custom-icon {
        /* typography */
        color: var(--bi-color-brand-grey-active);
      }
    }

    .bi-card__content {
      /* layout */
      flex: 1;
      /* dimensions */
      min-height: 0;
      /* spacing */
      padding: 32px 16px 0;
      /* overflow */
      overflow: hidden;
    }

    .bi-card__category {
      /* typography */
      letter-spacing: var(--bi-letter-spacing-normal);
    }

    .bi-card__content .bi-button.bi-button--primary {
      /* dimensions */
      min-height: 40px;
    }

    /* Dots inside card-content on desktop */
    .bi-card__dots {
      /* layout */
      display: flex;
      justify-content: center;
      /* dimensions */
      width: 100%;
      /* spacing */
      padding: 16px 0;
    }

    /* Hide external mobile pagination on desktop */
    .bi-card__pagination {
      /* layout */
      display: none;
    }

    .bi-pagination-module__dots {
      /* spacing */
      gap: 6px;
    }

    .bi-pagination-module__dot {
      /* dimensions */
      width: 11px;
      height: 11px;
    }
  }

  /* Event variant: hide categories on desktop */
  .bi-card__categories {
    /* layout */
    display: none;
  }

  .bi-stage-slider {
    .bi-card__img {
      width: 100%;
      height: 100%;
    }

    .bi-image-wrapper {
      height: var(--bi-stage-base-image-height-desktop);
      width: 100%;
    }

     .bi-card__img.bi-card__img__top_left {
       object-position: top left;
     }

     .bi-card__img.bi-card__img__top_center {
       object-position: top center;
     }

     .bi-card__img.bi-card__img__top_right {
       object-position: top right;
     }

     .bi-card__img.bi-card__img__center_left {
       object-position: center left;
     }

     .bi-card__img.bi-card__img__center {
       object-position: center center;
     }

     .bi-card__img.bi-card__img__center_right {
       object-position: center right;
     }

     .bi-card__img.bi-card__img__bottom_left {
       object-position: bottom left;
     }

     .bi-card__img.bi-card__img__bottom_center {
       object-position: bottom center;
     }

     .bi-card__img.bi-card__img__bottom_right {
       object-position: bottom right;
     }
  }
}
/* Active dot on blue background */
.bi-stage-slider.bi-container-secondary
  .bi-card__pagination
  .bi-pagination-module__dot--active,
.bi-stage-slider.bi-container-secondary
  .bi-card__pagination
  .bi-pagination-module__dot--active.bi-pagination-module__dot--pulse {
  /* visual */
  background-color: var(--bi-color-text-white);
}
/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .bi-stage-slider .bi-card__track {
    /* visual */
    transition: none;
  }

  .bi-stage-slider .bi-card__prev,
  .bi-stage-slider .bi-card__next {
    /* visual */
    transition: none;
  }

  .bi-stage-slider .bi-pagination-module__dot {
    /* visual */
    transition: none;
  }

  .bi-stage-slider .bi-card__slide[aria-hidden='true'] {
    transition-delay: 0s;
  }
}
/* StageThema content-specific styles */
.bi-stage-thema {
  /* Make the Card a flex column to space inner elements */
  .bi-card {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }

  /* Category label */
  .bi-card__category {
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-semibold);
    font-size: var(--bi-font-label-s);
    line-height: var(--bi-line-height-mini);
    letter-spacing: 1.28px;
    color: var(--bi-color-brand-primary);
  }

  /* Headline — explicit background lets contrast checkers resolve the color pair
     directly despite the card overlapping the image in StageBase */
  .bi-card__headline {
    /* spacing */
    margin: 0;
    background-color: var(--bi-color-container-white, #fff);
  }

  /* Headline link */
  .bi-card__headline-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      color: var(--bi-color-brand-secondary-hover);
    }

    &:active {
      color: var(--bi-color-brand-secondary-active);
    }

    &:focus-visible {
      outline: 2px solid var(--bi-color-focus);
      outline-offset: 2px;
    }
  }

  /* Description */
  .bi-card__description {
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-regular);
    font-size: var(--bi-font-copy-l);
    line-height: var(--bi-line-height-normal);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
  }
}
@media (min-width: 1200px) {
  .bi-stage-thema .bi-card__headline {
    /* h1 desktop font-size comes from typography.css */
  }
}
/* TeaserProductHighlight component styles */
:root {
  --bi-width-product-highlight-card: 1120px;
}
.bi-product-highlight-section {
  /* layout */
  display: flex;
  justify-content: center;
  /* dimensions */
  width: 100%;
  /* spacing */
  padding: 40px 24px;

  & .bi-card {
    max-width: unset;
  }
}
/* Contextual background – contrast with parent section */
.bi-container-white .bi-product-highlight-section .bi-card,
.bi-container-grey .bi-product-highlight-section .bi-card {
  background-color: var(--bi-color-surface);
}
.bi-container-white .bi-card--teaser-product-highlight .bi-card__image-container,
.bi-container-grey .bi-card--teaser-product-highlight .bi-card__image-container {
  background-color: var(--bi-color-surface);
}
.bi-card--teaser-product-highlight {
  /* layout */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: none;

  & .bi-badge {
    position: absolute;
    top: 9px;
    right: 32px;
    z-index: var(--bi-z-index-stage-content);
  }

  /* Image container */
  & .bi-card__image-container {
    /* layout */
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    /* dimensions */
    width: 100%;
    max-width: 352px;
    overflow: hidden;
    /* spacing */
    padding: 16px;

    & .bi-badge__image {
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  /* Picture element */
  & .bi-card__picture {
    /* layout */
    aspect-ratio: 310/437.94;
    /* dimensions */
    width: 100%;
    min-width: 100%;
    height: 100%;
  }

  /* Product image */
  & .bi-card__image {
    /* layout */
    aspect-ratio: 310/437.94;
    display: block;
    /* dimensions */
    width: 100%;
    height: 100%;
    /* styling */
    object-fit: cover;
  }

  /* Content */
  & .bi-card__content {
    /* layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    /* spacing */
    padding: 16px 16px 16px;
    margin-top: -14px;
    /* dimensions */
    width: 100%;
  }

  /* Title */
  & .bi-card__headline {
    text-align: left;
    /* typography */
    font-family: var(--bi-font-family-headline);
    /* color */
    color: var(--bi-color-text-secondary);
  }

  /* Description */
  & .bi-card__description {
    text-align: left;
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-regular);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    word-break: break-word;
    hyphens: auto;
  }

  /* Actions container */
  & .bi-card__actions {
    /* layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    /* dimensions */
    width: 100%;
  }

  /* Primary action */
  & .bi-card__button {
    width: 100%;
  }

  /* Secondary action */
  & .bi-card__secondary-button {
    width: fit-content;

    & .bi-button--secondary {
      padding: 0;
      min-height: unset;
    }

    .bi-button__link {
      padding: 0;
      min-height: unset;
    }
  }
}
/* Responsive adjustments */
@media (min-width: 1200px) {
  .bi-product-highlight-section {
    /*padding: 0 0 80px 0;*/
  }

  /* Component-specific card styling */
  .bi-product-highlight-section .bi-card {
    min-width: var(--bi-width-product-highlight-card);
    max-width: var(--bi-width-product-highlight-card);
    margin: 90px 0 60px;
    overflow: visible;
  }

  .bi-card--teaser-product-highlight {
    /* layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    /* spacing */
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 64px;
    /* dimensions */
    width: 100%;
    min-width: 100%;
    overflow: visible;

    /* Image container - positioned to stick out */
    & .bi-card__image-container {
      /* layout */
      display: flex;
      flex-shrink: 0;
      /* spacing */
      padding: 0;
      margin-top: -90px;
      margin-bottom: -60px;
      /* dimensions */
      width: 323.4944px;
      min-height: 457px;
    }

    & .bi-card__image {
      aspect-ratio: 323.49/457;
    }

    /* Content - positioned normally */
    & .bi-card__content {
      /* spacing */
      margin: 40px 0;
      padding-left: 60.5px;
      padding-right: 64px;
      gap: 16px;
      height: -webkit-fill-available;
      justify-content: space-between;
    }

    & .bi-card__actions {
      /* layout */
      flex-direction: column-reverse;
      gap: 19px;
    }

    .bi-card__secondary-button {
      .bi-button--secondary {
        padding: 0;
        min-height: unset;
      }
    }

    & .bi-card__button {
      align-self: flex-end;
      width: auto;
    }

    & .bi-badge {
      top: -13px;
      right: 32px;
    }
  }
}
/* TeaserShop component styles */
/* Default: white text (legible on bi-container-secondary purple). Flip
   to dark on white or grey containers for legibility. Direct-child
   combinators (`>`) keep the rule scoped to the IMMEDIATE container —
   without them a card nested in a white outer container with its own
   secondary section in between (e.g. on FreieSeite) would wrongly pick
   up the dark text from the outer ancestor. */
.bi-container-white > .bi-card--teaser-shop,
.bi-container-white > .bi-section-base__inner > .bi-card--teaser-shop,
.bi-container-grey > .bi-card--teaser-shop,
.bi-container-grey > .bi-section-base__inner > .bi-card--teaser-shop {
  color: var(--bi-color-text-black);
}
.bi-container-white > .bi-card--teaser-shop .bi-card__headline,
.bi-container-white > .bi-section-base__inner > .bi-card--teaser-shop .bi-card__headline,
.bi-container-grey > .bi-card--teaser-shop .bi-card__headline,
.bi-container-grey > .bi-section-base__inner > .bi-card--teaser-shop .bi-card__headline {
  color: var(--bi-color-text-secondary);
}
.bi-container-secondary {
  .bi-card--teaser-shop {
    color: var(--bi-color-base-white);
  }
}
.bi-card--teaser-shop {
  /* layout */
  position: relative;
  display: flex;
  flex-direction: column;
  /* dimensions */
  width: 100%;
  max-width: none;
  /* spacing */
  padding: 40px 0;
  border: none;
  background-color: transparent;
  /* color — white by default (legible on bi-container-secondary purple
     and on bi-container-grey). Flipped to dark by the white-container
     overrides above. */
  /* color: var(--bi-color-base-white); */

  .bi-section-base .bi-section-base & {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Content */
  .bi-card__content {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .bi-card__headline {
    /* typography */
    font-family: var(--bi-font-family-headline);
    font-weight: var(--bi-font-weight-bold);
    font-size: var(--bi-font-size-lg);
    /* color — white by default. The white-container override above
       flips it to the accent token (dark navy on a light background). */
    /* color: var(--bi-color-text-white); */
  }

  /* Description */
  .bi-card__description {
    /* reset */
    margin: 0;
    font-family: var(--bi-font-family-primary);
    font-style: normal;
    font-weight: var(--bi-font-weight-regular);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    /* typography */
    word-break: break-word;
    hyphens: auto;
  }

  /* Action container */
  .bi-card__button {
    width: fit-content;

    .bi-button--primary {
      height: 48px;
    }
  }
}
/* Responsive adjustments */
@media (min-width: 1200px) {
  .bi-card--teaser-shop {
    /* spacing */
    padding: 80px 0;
    align-items: center;

    .bi-card__headline {
      font-size: var(--bi-font-size-xxl-mobile);
    }

    .bi-card__content {
      max-width: 736px;
      gap: 16px;
      width: 100%;
    }

    .bi-card__button {
      margin-top: 16px;
    }
  }
}
/* TeaserProductBigSection wrapper */
.bi-teaser-product-big-section {
  /* layout */
  display: flex;
  justify-content: center;
  /* dimensions */
  width: 100%;
}
/* The `padding-top: 80px` exception for the nested case lives in
   teaserArticleSection.css together with the matching article-section
   override (both share the same selector list). */
/* VoucherSection wrapper styles */
.bi-voucher-section {
  /* layout */
  display: flex;
  justify-content: center;
  /* dimensions */
  width: 100%;
  /* spacing */
  padding: 40px 24px;
  /* background */
}
/* TeaserVoucher component styles */
.bi-card--teaser-voucher {
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 24px 16px;
  background-color: var(--bi-color-container-grey);
  border: none;
  max-width: none;
  /* gap */
  gap: 11px;

  /* Content */
  .bi-card__content {
    /* layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    /* spacing */
    padding-top: 11px;
  }

  /* Title */
  .bi-card__headline {
    /* reset */
    align-self: flex-start;
    /* typography */
    font-size: var(--bi-font-size-lg);
    /* color */
    color: var(--bi-color-text-secondary);
  }

  /* Description */
  .bi-card__description {
    /* reset */
    margin: 0;
    align-self: start;
    /* typography */
    word-break: break-word;
  }

  /* Validation message container - hidden by default */
  .bi-card__validation {
    /* layout */
    display: none;
    width: 100%;
    align-self: flex-start;
  }

  /* Validation list */
  .bi-card__validation-list {
    /* reset */
    margin: 0;
    padding: 0;
    /* layout */
    display: block;
    width: 100%;
    /* background */
    background-color: var(--bi-color-container-white);
    /* spacing */
    padding: 8px 12px;
    /* list style */
    list-style: disc;
    padding-left: 20px;
  }

  /* Suppress global ul > li::before dot — uses native disc via display: list-item */
  .bi-card__validation-item::before {
    content: none;
  }

  /* Validation message list items */
  .bi-card__validation-item {
    /* layout */
    display: list-item;
    /* typography */
    font-size: var(--bi-font-copy-s);
    line-height: 1.5;
    word-break: break-word;
    /* spacing */
    margin-bottom: 4px;
  }

  /* Success modifier - green text and border */
  &.bi-card--teaser-voucher--success .bi-card__validation {
    display: block;
    border: 2px solid var(--bi-color-functional-success);
  }

  &.bi-card--teaser-voucher--success .bi-card__validation-item {
    color: var(--bi-color-functional-success);
  }

  /* Error modifier - red text and border */
  &.bi-card--teaser-voucher--error .bi-card__validation {
    display: block;
    border: 2px solid var(--bi-color-functional-error);
  }

  &.bi-card--teaser-voucher--error .bi-card__validation-item {
    color: var(--bi-color-functional-error);
  }

  /* Form */
  .bi-card__input {
    /* layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .bi-card__icon {
    width: 80px;
    height: 80px;
  }

  /* Custom icon */
  .bi-card__icon .bi-custom-icon {
    font-size: 80px;
    /* color */
    color: var(--bi-color-icon-secondary);
    /* ensure SVG respects currentColor */
    fill: currentColor;
    stroke: currentColor;
  }

  .bi-card__button {
    .bi-button--primary,
    .bi-button__link {
      height: 48px;
    }
  }
}
/* Input always white — card background is grey so input needs contrast */
/* Specificity must beat `.bi-container-* .bi-input:not(...):not(...)` in input.css */
.bi-container-white .bi-card--teaser-voucher .bi-input:not(.bi-input--error):not(:user-invalid):not(:disabled),
.bi-container-grey .bi-card--teaser-voucher .bi-input:not(.bi-input--error):not(:user-invalid):not(:disabled) {
  background-color: var(--bi-color-container-white);
}
/* Responsive adjustments */
@media (min-width: 1200px) {
  :root {
    --bi-max-width-content: 544px;
  }

  .bi-voucher-section {
    padding: 80px 0;
  }

  .bi-card--teaser-voucher {
    position: relative;
    max-width: 918px;
    margin: 0 auto;
    padding: 40px 0;

    .bi-card__icon {
      position: absolute;
      top: 29px;
      left: 57px;
      width: 40px;
      height: 40px;
    }

    /* Title */
    .bi-card__headline {
      /* typography */
      font-size: var(--bi-font-size-xxl-mobile);
      /* color */
      color: var(--bi-color-text-secondary);
    }

    .bi-card__content {
      width: var(--bi-max-width-content);
      padding-top: 0;
    }

    /* Action container */
    .bi-card__button {
      margin-top: -8px;
      align-self: flex-end;
    }
  }
}
/* ThemeModule organism styles */
/* ========================================
   Container
   ======================================== */
.bi-theme-module {
  /* layout */
  width: 100%;
  /* clip watermark that extends beyond the centered container */
  overflow: hidden;
  /* color - mobile uses soft white; desktop overrides in media query */
  background-color: var(--bi-color-container-white-soft);
}
/* ========================================
   Mobile View
   ======================================== */
/* Container */
.bi-theme-module-mobile {
  /* layout */
  display: none;

  /* Accordion background color override for mobile */
  .bi-accordion {
    /* color */
    background-color: var(--bi-color-container-white-soft);
  }

  /* Full-width borders: no horizontal margin so borders stretch padding to padding */
  .bi-accordion-item {
    margin: 0;
  }

  /* When open: border under description (content), not under title */
  .bi-accordion-item--open .bi-accordion-item__trigger {
    border-bottom: none;
  }

  .bi-accordion-item--open .bi-accordion-item__content-inner {
    border-bottom: var(--bi-border-width) solid var(--bi-color-border-secondary);
  }

  .bi-accordion-item__trigger {
    /* layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* dimensions */
    min-height: 64px;
    /* spacing */
    padding: 0 16px;
  }

  .bi-accordion-item__trigger-icon {
    /* color */
    color: var(--bi-color-text-secondary);
    /* spacing */
    padding: 0 9px;
  }

  .bi-accordion-item__trigger-text {
    /* typography */
    font-weight: var(--bi-font-weight-regular);
    line-height: var(--bi-line-height-normal);
    letter-spacing: var(--bi-letter-spacing-normal);
    /* color */
    color: var(--bi-color-text-secondary);
  }

  /* Active/Open state - bold text */
  .bi-accordion-item--open .bi-accordion-item__trigger-text {
    /* typography */
    font-weight: var(--bi-font-weight-semibold);
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-medium);
  }

  .bi-accordion-item__description {
    /* layout */
    display: -webkit-box;
    /* typography */
    font-size: var(--bi-font-copy-m);
    /* text truncation */
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    line-clamp: 7;
    /* spacing */
    padding: 16px 16px 0 16px;
  }

  .bi-accordion-item__button {
    /* spacing */
    padding: 20px 16px 24px;

    /* Nested Button Overrides */
    .bi-button--secondary {
      /* spacing */
      padding: 0;
      min-height: 20px;
    }
  }
}
/* Mobile Headline */
.bi-theme-module-mobile__headline {
  /* layout */
  text-align: left;
  /* typography */
  font-family: var(--bi-font-family-headline);
  font-size: 30px;
  /* spacing */
  padding-bottom: 32px;
}
/* Mobile Action Area */
.bi-theme-module-mobile__action {
  /* layout */
  display: flex;
  justify-content: center;
  /* dimensions */
  width: 100%;
  /* spacing */
  padding: 24px 0 0 0;
}
/* ========================================
   Desktop View
   ======================================== */
/* Wrapper */
.bi-theme-module-desktop {
  /* layout */
  display: grid;
  grid-template-columns: 391px auto;
  /* Stretch both columns to the full row height so the right-column images are flush to the
     section's top/bottom edges. The left column's internal flex layout (headline / list / button
     with margin-top:auto) distributes the extra space correctly, so stretching does not break it. */
  align-items: stretch;
  /* dimensions */
  width: 100%;
  max-width: var(--bi-max-width-desktop);
  /* spacing */
  gap: 58px;
  margin: 0 auto;
}
/* Navigation Column Wrapper */
.bi-theme-module-desktop__navigation-wrapper {
  /* dimensions — fill the grid row height so the nav column can grow with the right (image) column;
     this lets the link list flex-fill available space and only scroll when items actually overflow */
  height: 100%;
  min-height: 100px;
  /* spacing */
  padding-right: 99px;
}
/* Right Column (Image Area) */
.bi-theme-module__right {
  /* layout */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  /* dimensions — fill the outer grid row so the inner content items (with grid-area: 1/1)
     have a concrete cell height to stretch into, guaranteeing the images touch the section edges */
  width: 100%;
  height: 100%;
  min-width: 0;
  /* positioning context for watermark */
  position: relative;
}
/* Decorative IDW Watermark - behind all content to avoid glitch during panel switch */
.bi-theme-module__watermark {
  /* positioning */
  position: absolute;
  left: 544px;
  top: 0;
  /* dimensions — scale from image edge to viewport edge, capped at design size */
  width: calc(50vw - 433px);
  max-width: 330px;
  aspect-ratio: 330 / 772;
  /* appearance */
  object-fit: contain;
  object-position: left top;
  pointer-events: none;
  z-index: var(--bi-z-index-theme-module-watermark);
}
/* Right Content Item (Individual Slide) */
.bi-theme-module__right .bi-theme-module-desktop__content {
  /* layout */
  display: flex;
  grid-area: 1 / 1;
  /* dimensions — fill the inner grid cell so the top/bottom decorative images are anchored to
     the section edges rather than being centered vertically inside a taller cell */
  height: 100%;
  /* stacking */
  z-index: var(--bi-z-index-theme-module-inactive);
  pointer-events: none;
}
/* Inactive: fade images, hide text card instantly */
.bi-theme-module__right
  .bi-theme-module-desktop__content
  .bi-theme-module-desktop__content-image-wrapper,
.bi-theme-module__right
  .bi-theme-module-desktop__content
  .bi-theme-module-desktop__content-main-image-wrapper {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.bi-theme-module__right
  .bi-theme-module-desktop__content
  .bi-theme-module-desktop__content-text-content {
  visibility: hidden;
}
/* Active State */
.bi-theme-module__right
  .bi-theme-module-desktop__content.bi-theme-module-desktop__content--active {
  z-index: var(--bi-z-index-theme-module-active);
  pointer-events: auto;
}
.bi-theme-module__right
  .bi-theme-module-desktop__content--active
  .bi-theme-module-desktop__content-image-wrapper,
.bi-theme-module__right
  .bi-theme-module-desktop__content--active
  .bi-theme-module-desktop__content-main-image-wrapper {
  opacity: 1;
}
.bi-theme-module__right
  .bi-theme-module-desktop__content--active
  .bi-theme-module-desktop__content-text-content {
  visibility: visible;
}
/* Desktop: dark background */
@media (min-width: 1200px) {
  .bi-theme-module {
    /* color */
    background-color: var(--bi-color-container-secondary);
    /* spacing — suppress the `bi-section-padded-*` 80px top/bottom padding so
       the right-column images touch the section's top and bottom edges (per
       design). Vertical breathing room for the left column is re-applied on
       the navigation wrapper below. */
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Left column — re-apply the vertical padding that SectionBase no longer provides.
     Because the navigation is a flex column (headline / list / action with margin-top:auto),
     the headline sits at the top of the padded area and the button at the bottom,
     matching the design. */
  .bi-theme-module-desktop__navigation-wrapper {
    /* spacing */
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
/* LoginDialog organism – login form content inside Dialog shell */
.bi-login-dialog {
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* dimensions */
  width: 100%;

  /* View toggle (login vs. forgot) */

  /* Views are hidden by default, shown via --active class */
  .bi-login-dialog__view {
    /* layout */
    display: none;
    flex-direction: column;
    align-items: center;
    /* dimensions */
    width: 100%;
  }

  .bi-login-dialog__view--active {
    display: flex;
  }

  /* Header */

  /* Title */
  .bi-login-dialog__title {
    /* typography */
    font-family: var(--bi-font-family-headline);
    font-weight: var(--bi-font-weight-semibold);
    font-size: 30px;
    line-height: var(--bi-line-height-tight);
    letter-spacing: var(--bi-letter-spacing-normal);
    text-align: center;
    overflow-wrap: break-word;
    /* color */
    color: var(--bi-color-brand-secondary);
    /* spacing — horizontal padding reserves space for the dialog close button */
    padding-inline: 40px;
    margin-bottom: 16px;
  }

  /* Description paragraph */
  .bi-login-dialog__description {
    /* dimensions */
    max-width: 220px;
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-size: var(--bi-font-copy-s);
    line-height: var(--bi-line-height-tight);
    text-align: center;
    /* color */
    color: var(--bi-color-text-black);
    /* spacing */
    margin-bottom: 32px;
  }

  /* Instruction paragraph */
  .bi-login-dialog__instruction {
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-size: var(--bi-font-size-xs);
    line-height: var(--bi-line-height-tight);
    text-align: center;
    /* color */
    color: var(--bi-color-text-black);
    /* spacing */
    margin-bottom: 16px;
  }

  /* Form */

  .bi-login-dialog__form,
  .bi-login-dialog__forgot-form {
    /* layout */
    display: flex;
    flex-direction: column;
    /* dimensions */
    width: 100%;
  }

  /* Validation */

  .bi-login-dialog__validation {
    /* layout */
    display: none;
    align-self: flex-start;
    /* dimensions */
    width: 100%;
    /* spacing */
    margin-bottom: 16px;
  }

  /* Error state — styled but hidden until --active is added by JS */
  .bi-login-dialog__validation--error {
    /* border */
    /* border: 2px solid var(--bi-color-functional-error); */
    border-left: 4px solid var(--bi-color-functional-error);
    background-color: var(--bi-color-functional-error-light);

    .bi-login-dialog__validation-list {
      background: transparent;
    }

    .bi-login-dialog__validation-item {
      /* color */
      color: var(--bi-color-functional-error);
    }
  }

  /* Success state */
  .bi-login-dialog__validation--success {
    /* border */
    /*border: 2px solid var(--bi-color-functional-success, #2e7d32);*/
    border-left: 4px solid var(--bi-color-functional-success);
    background-color: var(--bi-color-functional-success-light);

    .bi-login-dialog__validation-list {
      background: transparent;
    }

    .bi-login-dialog__validation-item {
      /* color */
      color: var(--bi-color-functional-success, #2e7d32);
    }
  }

  /* Shown when JS adds --active */
  .bi-login-dialog__validation--active {
    display: block;
  }

  .bi-login-dialog__validation-list {
    /* dimensions */
    width: 100%;
    /* spacing */
    margin: 0;
    padding: 12px 20px;
    /* list */
    list-style: none;
    /* color */
    background-color: var(--bi-color-container-white);
  }

  .bi-login-dialog__validation-item {
    /* layout */
    display: list-item;
    /* dimensions — override global `li { min-height: 24px }` so text sits centered */
    min-height: 0;
    /* typography */
    font-size: var(--bi-font-copy-s);
    line-height: 1.5;
    word-break: break-word;

    &:not(:last-child) {
      /* spacing */
      margin-bottom: 4px;
    }
  }

  /* Labels and fields */

  /* Visually hidden labels (placeholders visible) */
  .bi-login-dialog__label {
    /* position */
    position: absolute;
    /* dimensions */
    width: 1px;
    height: 1px;
    /* spacing */
    padding: 0;
    margin: -1px;
    /* overflow */
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    /* typography */
    white-space: nowrap;
    /* border */
    border: 0;
  }

  .bi-login-dialog__field {
    /* spacing */
    margin-bottom: 13px;
  }

  .bi-login-dialog__input {
    /* dimensions */
    height: 48px;
    /* color */
    background-color: var(--bi-color-base-grey-100);
  }

  /* Password field wrapper – positions toggle button over input */
  .bi-login-dialog__field--password {
    /* position */
    position: relative;
  }

  /* Password visibility toggle */
  .bi-login-dialog__password-toggle.bi-button {
    /* position */
    position: absolute;
    right: 12px;
    bottom: 12px;
    /* reset */
    width: auto;
    background: none;
    border: none;
    padding: 2px;
    border-radius: 0;
    /* dimensions – WCAG 2.5.8: minimum 24×24px target area */
    min-width: 24px;
    min-height: 24px;
    /* typography */
    font-size: var(--bi-font-size-lg);
    line-height: 1;
    /* color */
    color: var(--bi-color-brand-grey-mid);
    /* behavior */
    cursor: pointer;

    &:hover {
      color: var(--bi-color-text-black);
    }

    &:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
    }
  }

  /* Links */

  /* Forgot password link */
  .bi-login-dialog__forgot-link {
    /* layout */
    align-self: flex-end;
    /* spacing */
    margin-bottom: 12px;
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-size: var(--bi-font-size-xs);
    line-height: var(--bi-line-height-tight);
    text-decoration: underline;
    text-align: right;
    /* color */
    color: var(--bi-color-brand-primary);

    &:hover {
      color: var(--bi-color-brand-primary-hover);
    }

    &:active {
      color: var(--bi-color-brand-primary-active);
    }

    &:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
    }
  }

  /* Register block */

  .bi-login-dialog__register {
    /* layout */
    display: flex;
    flex-direction: column;
    gap: var(--bi-size-050);
  }

  .bi-login-dialog__register-text {
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-size: var(--bi-font-size-xs);
    line-height: var(--bi-line-height-tight);
    /* color */
    color: var(--bi-color-text-black);
  }

  .bi-login-dialog__register-link {
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-size: var(--bi-font-size-xs);
    line-height: var(--bi-line-height-tight);
    text-decoration: underline;
    /* color */
    color: var(--bi-color-brand-primary);

    &:hover {
      color: var(--bi-color-brand-primary-hover);
    }

    &:active {
      color: var(--bi-color-brand-primary-active);
    }

    &:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
    }
  }

  /* Actions (submit area) */

  .bi-login-dialog__actions {
    /* layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .bi-login-dialog__submit {
    /* dimensions */
    min-height: 28px;
  }

  /* Forgot-password view */

  .bi-login-dialog__forgot-intro {
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-size: var(--bi-font-copy-s);
    line-height: var(--bi-line-height-relaxed);
    text-align: start;
    /* color */
    color: var(--bi-color-text-black);
    /* spacing */
    margin: 0 0 var(--bi-size-200);
  }

  .bi-login-dialog__forgot-oder {
    /* typography */
    text-decoration: underline;
    font-weight: var(--bi-font-weight-semibold);
  }

  /* Support contact section — freeform CMS HTML rendered inside a single wrapper */
  .bi-login-dialog__forgot-support {
    /* dimensions */
    width: 100%;
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-size: var(--bi-font-copy-s);
    line-height: var(--bi-line-height-relaxed);
    text-align: start;
    /* color */
    color: var(--bi-color-text-black);
    /* spacing */
    margin: 0 0 var(--bi-size-300);

    /* Override global `p { font-size: copy-m }` so nested paragraphs match the intro */
    p {
      font-size: inherit;
      line-height: inherit;
    }

    a {
      /* typography */
      text-decoration: underline;
      font-weight: var(--bi-font-weight-medium);
      /* color */
      color: var(--bi-color-brand-primary);

      &:hover {
        color: var(--bi-color-brand-primary-hover);
      }

      &:focus-visible {
        outline: none;
        box-shadow:
          0 0 0 2px var(--bi-color-focus-inner),
          0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
      }
    }
  }

  /* Forgot-password form labels */
  .bi-login-dialog__forgot-label {
    /* layout */
    display: block;
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-size: var(--bi-font-copy-s);
    font-weight: var(--bi-font-weight-regular);
    /* color */
    color: var(--bi-color-text-black);
    /* spacing */
    margin-bottom: var(--bi-size-050);
  }

  /* Forgot-password actions row */
  .bi-login-dialog__actions.bi-login-dialog__actions--forgot {
    /* layout */
    justify-content: space-between;
    align-items: center;
    /* spacing */
    margin-top: var(--bi-size-200);
  }

  /* Back to login link-button */
  .bi-login-dialog__back-to-login.bi-button {
    /* reset */
    min-height: auto;
    width: auto;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-size: var(--bi-font-copy-s);
    font-weight: var(--bi-font-weight-semibold);
    text-decoration: underline;
    /* color */
    color: var(--bi-color-brand-primary);
    /* behavior */
    cursor: pointer;

    &:hover {
      color: var(--bi-color-brand-primary-hover);
    }

    &:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 2px var(--bi-color-focus-inner),
        0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
    }
  }
}
/* Desktop */
@media (min-width: 1200px) {
  .bi-login-dialog {
    .bi-login-dialog__title {
      /* typography */
      font-size: var(--bi-font-size-xxl);
      /* spacing */
      margin-bottom: 32px;
    }

    .bi-login-dialog__description {
      /* dimensions */
      max-width: 520px;
      /* typography */
      font-size: var(--bi-font-copy-xxl);
      line-height: var(--bi-line-height-normal);
      /* spacing */
      margin-bottom: 20px;
    }

    .bi-login-dialog__instruction {
      /* typography */
      font-size: var(--bi-font-copy-m);
      /* spacing */
      margin-bottom: 32px;
    }

    .bi-login-dialog__field {
      /* spacing */
      margin-bottom: 23px;
    }

    .bi-login-dialog__forgot-link {
      /* typography */
      font-size: var(--bi-font-copy-m);
      /* spacing */
      margin-bottom: 20px;
    }

    .bi-login-dialog__submit {
      /* dimensions */
      min-height: 40px;
      /* spacing */
      padding: 0 32.5px;
    }

    .bi-login-dialog__register-text {
      /* typography */
      font-size: var(--bi-font-copy-m);
    }

    .bi-login-dialog__register-link {
      /* typography */
      font-size: var(--bi-font-copy-m);
    }

    .bi-login-dialog__forgot-intro,
    .bi-login-dialog__forgot-support {
      /* typography */
      font-size: var(--bi-font-copy-m);
    }
  }
}
/* Remove double eye from password field in Edge */
input[type="password"]::-ms-reveal {
  display: none;
}
/* Suche (Search) page */
.bi-search-section {
  /* spacing from header/CTA above */
  margin-top: 24px;
  /* positioning anchor for the loading overlay (::before/::after below) */
  position: relative;
}
/* The form owns the vertical rhythm — it wraps every dynamic section so the
   gap applies between the search input, filters, popular, results, etc. */
.bi-search-section__form {
  /* layout */
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  .bi-search-section__form {
    gap: 32px;
  }
}
.bi-search-section__search {
  /* layout */
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* anchor for the absolutely-positioned suggestions overlay */
  position: relative;
}
/* Autocomplete suggestions float as an overlay directly below the input
   so they don't push the form's filter row + results down when typing.
   Chip styling lives in the shared SearchAutocomplete atom. */
.bi-search-section__suggestions {
  /* layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  /* spacing */
  padding: 12px 16px;
  margin: 0;
  /* dimensions */
  max-width: 100%;
  /* reset list */
  list-style: none;
  /* overlay positioning */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  /* visual — card-like surface so it reads as floating above the form */
  background-color: var(--bi-color-container-white);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);

  &[hidden] {
    display: none;
  }
}
/* Containers the controller fills; hide any that are empty */
.bi-search-section__dynamic:empty {
  display: none;
}
/* ── Filter row ───────────────────────────────────────────────────────────── */
/* Desktop: inline row with facets, any `filtersInline` slot content (e.g. the
   Veranstaltungen year range), and the Suchen button — wraps when space runs
   out. Mobile: stacked full-width in the same order. */
.bi-search-section__filter-row {
  /* layout */
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* `data-search-filters` wraps the dynamically-rendered facet dropdowns.
   `display: contents` hoists each facet div up to become a direct flex child
   of the row, so facets, slot content, and the Suchen button all live in the
   same flex container and wrap together. */
.bi-search-section__filter-row-facets {
  display: contents;
}
.bi-search-section__filter {
  /* dimensions — full width on mobile */
  width: 100%;
}
.bi-search-section__filter--submit {
  /* keep the button's intrinsic width, don't stretch */
  width: auto;
}
@media (min-width: 768px) {
  .bi-search-section__filter-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
  }

  .bi-search-section__filter {
    flex: 1 1 180px;
    max-width: 256px;
    min-width: 0;
    width: auto;
  }

  .bi-search-section__filter--submit {
    flex: 0 0 auto;
    max-width: none;
  }
}
/* ── Verfügbarkeit / Sortierung (radio buttons) ───────────────────────────── */
/* `:not([hidden])` keeps the class-level `display: flex` from overriding the
   browser default `[hidden] { display: none }` — the Sortierung row toggles
   `hidden` between empty and active search states. */
.bi-search-section__availability:not([hidden]) {
  /* layout */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;

  .bi-search-section__availability-label {
    /* Mobile: label takes full row, radios wrap below */
    width: 100%;
  }
}
@media (min-width: 768px) {
  .bi-search-section__availability .bi-search-section__availability-label {
    width: auto;
  }
}
/* ── Aktive Filter (selected dropdown values as chips) ────────────────────── */
.bi-search-section__active-filters {
  /* layout */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bi-search-section__active-filters-label {
  /* reset */
  display: block;
}
.bi-search-section__active-filters-row {
  /* layout */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
/* Chip wrapper: groups a chip with its hidden form input so removing the
   chip element removes the input with it. display:contents makes the wrapper
   transparent to the flex layout — the chip acts as the flex item directly. */
.bi-chip-wrapper {
  display: contents;
}
/* Make all interactive chips show pointer */
.bi-search-section .bi-chip[role='button'] {
  cursor: pointer;
}
/* ── Date range (used by Veranstaltungen via the `filtersInline` slot) ────── */
/* Label sits above the two date inputs on all viewports.
   On desktop the label is absolutely positioned so the block's *layout*
   height equals just the inputs — this way the year block vertically aligns
   with the other center-aligned items in the filter row (Themen, Formate,
   Suchen) while the "Jahr" text still appears visually above. */
.bi-search-section__date-range {
  /* layout */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bi-search-section__date-range-label {
  /* reset */
  display: block;
  padding: 0;
}
.bi-search-section__date-range-inputs {
  /* layout */
  display: flex;
  flex-wrap: wrap;
  gap: 16px;

  & > * {
    flex: 1 1 160px;
    min-width: 0;
    max-width: 256px;
  }
}
@media (min-width: 768px) {
  .bi-search-section__date-range {
    /* Anchor for the absolutely-positioned label */
    position: relative;
    /* Block's layout size = inputs only, no label contribution */
    flex-direction: row;
    gap: 0;
  }

  .bi-search-section__date-range-label {
    /* Visually above the inputs, outside the flex flow so it doesn't push
       the block taller than its siblings in the filter row. */
    position: absolute;
    top: -24px;
    left: 0;
  }
}
/* ── Popular search terms ─────────────────────────────────────────────────── */
.bi-search-section__popular {
  /* layout */
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* spacing */
  padding-top: 20px;
  /* border */
  border-top: 1px solid var(--bi-color-base-grey-200);
}
.bi-search-section__popular-chips {
  /* layout */
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.bi-search-section__section-label {
  /* reset */
  display: block;
  /* spacing */
  margin-bottom: 4px;
}
/* ── Results ──────────────────────────────────────────────────────────────── */
/* `:not([hidden])` so the class-level `display: flex` doesn't override the
   browser's default `[hidden] { display: none }`. Without this the static
   results/empty/error containers flash visible on initial load. */
.bi-search-section__results:not([hidden]) {
  /* layout */
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* spacing */
  padding-top: 8px;
  /* positioning for loading overlay */
  position: relative;
}
/* Results header: stacked count + sort row on mobile, inline on desktop. */
.bi-search-section__results-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bi-search-section__results-list {
  /* layout */
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* Mobile: shrink "X Treffer gefunden" to the next smaller semantic copy
   size so the compact stacked layout doesn't get top-heavy. Desktop bumps
   it up to the .bi-headline-m size in the media query below.
   `margin: 0` overrides the global `p:not(:last-child) { margin-bottom: 16px }`
   — without this, the count paragraph's outer box is 16px taller than its
   text on desktop (where the radios are its sibling), so `align-items: center`
   would center the inflated box and push the visible text above the radio row.
   The `p` qualifier raises specificity above the global paragraph rule. */
p.bi-search-section__results-count {
  margin: 0;
  font-size: var(--bi-font-copy-m);
  line-height: 1;
}
/* Sort radios show a Bootstrap icon as their visible label; bump it so it
   reads as a glyph rather than inline body copy. Center the whole row
   (overriding the RadioButton atom's flex-start + label padding-top, which
   were calibrated for text baselines) so the radio dot, the "Relevanz" text
   and the two glyphs share one vertical line. */
.bi-search-section__results-sort .bi-radio {
  align-items: center;
}
.bi-search-section__results-sort .bi-radio__label {
  padding-top: 0;
  line-height: 1;
}
.bi-search-section__results-sort .bi-radio__label > .bi {
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .bi-search-section__results-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
  }

  p.bi-search-section__results-count {
    font-size: var(--bi-font-headline-m);
  }
}
/* Hide the "X Treffer gefunden" line when the count span hasn't been
   filled yet (initial empty state, during first-ever loading, or when
   `clearDynamicContainers` reset the textContent). */
.bi-search-section__results-count:has([data-search-results-count]:empty) {
  display: none;
}
/* Result card inner layout is owned by the backend — no CSS here.
   The backend delivers pre-rendered HTML strings; we just wrap them in Card. */
/* ── Pagination ────────────────────────────────────────────────────────────── */
.bi-search-section [data-search-pagination] {
  display: flex;
  justify-content: center;
}
/* ── Loading state ────────────────────────────────────────────────────────── */
/* Overlay + spinner sit on the section root so the entire search area is
   blanketed while a fetch is in flight — not just the results column. */
.bi-search-section--loading {
  &::after {
    content: '';
    /* positioning — cover the whole section */
    position: absolute;
    inset: 0;
    /* styling */
    background-color: rgb(255 255 255 / 60%);
    /* interaction */
    pointer-events: none;
    /* layering */
    z-index: 1;
  }

  &::before {
    content: '';
    /* positioning — fixed in the viewport so the spinner stays centered no
       matter how the user scrolls, and — crucially — contributes nothing to
       layout flow (no shift of the surrounding search controls). Pixel-math
       centering (not `translate(-50%,-50%)`) because the spin animation
       writes its own `transform: rotate(...)` which would replace any static
       transform and knock the spinner off-center. */
    position: fixed;
    top: calc(50vh - 20px);
    left: calc(50vw - 20px);
    /* dimensions */
    width: 40px;
    height: 40px;
    /* visual */
    border: 3px solid var(--bi-color-base-grey-200);
    border-top-color: var(--bi-color-brand-secondary);
    border-radius: var(--bi-radius-full);
    /* animation */
    animation: bi-search-spin 0.8s linear infinite;
    /* layering */
    z-index: 2;
    /* interaction */
    pointer-events: none;
  }
}
@keyframes bi-search-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* ── Empty + error states ─────────────────────────────────────────────────── */
/* `:not([hidden])` so the class-level `display: flex` doesn't override the
   browser's default `[hidden] { display: none }`. */
.bi-search-section__empty:not([hidden]),
.bi-search-section__error:not([hidden]) {
  /* layout */
  display: flex;
  flex-direction: column;
  gap: 16px;

  .bi-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}
/* RegistrationSection organism */
.bi-registration-section {
  /* Shared SectionBase override */
  &.bi-section-base {
    /* spacing */
    padding: var(--bi-size-500) var(--bi-sides-default);
  }

  /* Header band */
  &.bi-registration-section--header {
    /* colors */
    background-color: var(--bi-color-container-mid-grey);
    /* spacing */
    padding-block: var(--bi-size-500) var(--bi-size-400);
  }

  .bi-registration-section__page-title {
    /* spacing */
    margin: 0;
    /* typography */
    font-family: var(--bi-font-family-headline);
    font-size: 30px;
    font-weight: var(--bi-font-weight-semibold);
    line-height: var(--bi-line-height-tight);
    /* colors */
    color: var(--bi-color-brand-secondary);
  }

  /* Intro band */
  &.bi-registration-section--intro {
    /* colors */
    background-color: var(--bi-color-container-white-soft);
    /* spacing */
    padding-block: var(--bi-size-400) var(--bi-size-500);
  }

  .bi-registration-section__intro-text {
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-normal);
    /* colors */
    color: var(--bi-color-text-black);

    p {
      /* spacing */
      margin-block-end: var(--bi-size-200);

      &:last-child {
        /* spacing */
        margin-block-end: 0;
      }
    }
  }

  /* Content band */
  &.bi-registration-section--content {
    /* colors */
    background-color: var(--bi-color-container-grey);
    /* spacing */
    padding-block: var(--bi-size-500);
  }

  /* Type selector */
  .bi-registration-section__type-selector {
    /* spacing */
    margin: 0 0 var(--bi-size-500);
    padding: 0;
    /* border */
    border: none;
  }

  .bi-registration-section__type-options {
    /* layout */
    display: flex;
    flex-direction: column;
    /* spacing */
    gap: var(--bi-size-200);
    padding-left: var(--bi-size-200);

    .bi-radio {
      /* layout */
      align-items: center;
      /* spacing */
      gap: var(--bi-size-150);
    }

    .bi-radio__label {
      /* spacing */
      padding-top: 0;
      /* typography */
      font-family: var(--bi-font-family-primary);
      font-size: var(--bi-font-headline-m);
      font-weight: var(--bi-font-weight-semibold);
      line-height: var(--bi-line-height-tight);
    }
  }

  /* Form panels (CSS-only toggle with :has + :checked) */
  .bi-registration-section__form-panel {
    /* layout */
    display: none;
  }

  &.bi-registration-section--content:has(#reg-type-member:checked)
    .bi-registration-section__form-panel[data-registration-type='member'],
  &.bi-registration-section--content:has(#reg-type-nonmember:checked)
    .bi-registration-section__form-panel[data-registration-type='nonmember'],
  &.bi-registration-section--content:has(#reg-type-employee:checked)
    .bi-registration-section__form-panel[data-registration-type='employee'] {
    /* layout */
    display: block;
  }

  .bi-registration-section__form-title {
    /* spacing */
    margin-block-end: var(--bi-size-200);
    /* typography */
    font-family: var(--bi-font-family-headline);
    font-size: 30px;
    font-weight: var(--bi-font-weight-semibold);
    line-height: var(--bi-line-height-tight);
    /* colors */
    color: var(--bi-color-brand-secondary);
  }

  .bi-registration-section__required-note {
    /* spacing */
    margin-block-end: var(--bi-size-300);
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-size: var(--bi-font-copy-m);
    font-weight: var(--bi-font-weight-semibold);
    line-height: var(--bi-line-height-tight);
    /* colors */
    color: var(--bi-color-text-black);
  }

  /* Form */
  .bi-registration-section__form {
    /* layout */
    display: flex;
    flex-direction: column;
  }

  .bi-registration-section__field {
    /* spacing */
    margin-block-end: var(--bi-size-200);
  }

  .bi-registration-section__field--terms {
    /* spacing */
    margin-block-end: var(--bi-size-300);
  }

  .bi-registration-section__description--privacy {
    /* spacing */
    margin-block-end: var(--bi-size-300);
    /* typography */
    font-family: var(--bi-font-family-primary);
    font-size: var(--bi-font-copy-m);
    line-height: var(--bi-line-height-normal);
    /* colors */
    color: var(--bi-color-text-black);

    a {
      /* typography */
      text-decoration: underline;
      /* colors */
      color: var(--bi-color-brand-primary);

      &:hover {
        /* colors */
        color: var(--bi-color-brand-primary-hover);
      }

      &:focus-visible {
        /* border */
        outline: none;
        /* effects */
        box-shadow:
          0 0 0 2px var(--bi-color-focus-inner),
          0 0 0 calc(2px + 1.5px) var(--bi-color-focus);
      }
    }
  }

  /*
   * Validation skeleton — empty by default, populated by the CMS after a
   * failed submit (full page reload, server-side validation). Hidden while
   * empty and revealed once an <li> is present via :has().
   * Visual matches the shared Teaser: Voucher Code error pattern.
   */
  .bi-registration-section__validation {
    /* layout */
    display: none;
    width: 100%;
    /* spacing */
    margin-block-end: var(--bi-size-200);
    /* border */
    border: 2px solid var(--bi-color-functional-error);
  }

  .bi-registration-section__validation:has(li) {
    /* layout */
    display: block;
  }

  .bi-registration-section__validation-list {
    /* layout */
    display: block;
    width: 100%;
    list-style: disc;
    /* spacing */
    margin: 0;
    padding: 8px 12px 8px 32px;
    /* colors */
    background-color: var(--bi-color-container-white);
  }

  /* Suppress global ul > li::before dot — uses native disc via display: list-item */
  .bi-registration-section__validation-item::before {
    content: none;
  }

  .bi-registration-section__validation-item {
    /* layout */
    display: list-item;
    /* spacing */
    margin-bottom: 4px;
    /* typography */
    font-size: var(--bi-font-copy-s);
    line-height: 1.5;
    word-break: break-word;
    /* colors */
    color: var(--bi-color-functional-error);
  }

  /* Submit row */
  .bi-registration-section__actions {
    /* layout */
    display: flex;
    justify-content: center;
  }
}
@media (min-width: 1200px) {
  .bi-registration-section {
    &.bi-section-base {
      /* spacing */
      padding: var(--bi-size-400) 0;
    }

    &.bi-registration-section--header {
      /* colors */
      background-color: var(--bi-color-container-grey);
    }

    &.bi-registration-section--intro {
      /* colors */
      background-color: var(--bi-color-container-white);
      /* border */
      border-block-end: 1px solid var(--bi-color-base-grey-300);
    }

    &.bi-registration-section--content {
      /* colors */
      background-color: var(--bi-color-container-grey);
    }

    .bi-registration-section__page-title {
      /* typography */
      font-size: var(--bi-font-size-xxl);
    }

    .bi-registration-section__form-title {
      /* spacing */
      margin-block-end: var(--bi-size-300);
      /* typography */
      font-size: var(--bi-font-size-xxl);
    }

    .bi-registration-section__required-note {
      /* typography */
      font-size: var(--bi-font-copy-s);
      font-weight: var(--bi-font-weight-regular);
    }

    .bi-registration-section__type-options {
      /* spacing */
      padding-left: 0;
    }

    .bi-registration-section__description--privacy {
      /* typography */
      font-size: var(--bi-font-copy-s);
    }

    .bi-registration-section__field {
      /* spacing */
      margin-block-end: var(--bi-size-300);
    }

    .bi-registration-section__actions {
      /* layout */
      justify-content: flex-end;
    }
  }
}
/* LAYOUT */
/* TemplateDefault Styles */
.bi-layout-default {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.bi-layout-default__main {
  margin-top: 56px;
  /* Fill the space */
  flex: 1;
  /* Main content will be styled by individual pages */
}
@media (min-width: 1200px) {
  .bi-layout-default__main {
    margin-top: 0px;
  }
}
/* Page heading with optional CTA button.
   Mobile: CTA above heading. Desktop: CTA below heading. */
.bi-page-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bi-page-heading__cta {
  display: flex;
  justify-content: center;
}
@media (min-width: 768px) {
  .bi-page-heading {
    flex-direction: column-reverse;
  }

  .bi-page-heading__cta {
    justify-content: flex-end;
  }
}
/* CMS Forms */
/* CMS form feedback blocks */
.default-idw-form {
    margin-bottom: 24px;
}
.form-success {
    padding: 12px 16px;
    background-color: var(--bi-color-functional-success-light, #e6f4ea);
    border-left: 4px solid var(--bi-color-functional-success, #2e7d32);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: var(--bi-font-copy-s);
    color: var(--bi-color-text-black);
}
.form-error {
    padding: 12px 16px;
    background-color: var(--bi-color-functional-error-light);
    border-left: 4px solid var(--bi-color-functional-error);
    font-size: var(--bi-font-copy-s);
    color: var(--bi-color-functional-error);
}
.form-error li {
    list-style:none;
    padding-left:0px;
    font-size: unset;
    color: unset;
    min-height: 24px;
}
.form-submit {
    margin-top: 8px;
}
.form-error ul > li::before {
    content: none;
}
.form-fieldset-newsletter {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.form-fieldset-newsletter legend {
    font-size: var(--bi-font-copy-s);
    color: var(--bi-color-text-black);
    font-weight: var(--bi-font-weight-semibold, 600);
    margin-bottom: 8px;
    float: left; width: 100%;
}
/* Third-party overrides */
/**
 * Cookiebot CSS Overrides
 * Styles the Cookiebot consent dialog to match the DWI / IDW design system.
 * Cookiebot renders its own DOM (#CybotCookiebotDialog) — we override its defaults here.
 * Lean modal: square corners, no elevation shadow, compact spacing (aligned with idw.de).
 *
 * !important is required throughout because Cookiebot's own injected stylesheet
 * uses !important on its declarations; without it our overrides cannot win the cascade.
 */
/* Overlay / Backdrop (sibling of dialog, cannot be nested) */
#CybotCookiebotDialogBodyUnderlay {
  /* color */
  background: rgba(0, 0, 0, 0.45) !important;
  /* position */
  z-index: calc(var(--bi-z-index-cookie-consent) - 1) !important;
}
/* Suppress the global `ul > li::before` disc bullet (core.css) inside the
   Cookiebot dialog — Cookiebot renders the category list as <ul><li> and our
   global bullet bleeds in beside each row. Scoped to #CybotCookiebotDialog so
   other lists in the app are unaffected. */
#CybotCookiebotDialog li::before {
  content: none !important;
}
/* Dialog container */
#CybotCookiebotDialog {
  /* typography */
  font-family: var(--bi-font-family-primary) !important;
  /* color */
  background: var(--bi-color-base-white) !important;
  border: none !important;
  border-radius: var(--bi-radius-none) !important;
  box-shadow: none !important;
  /* position */
  position: fixed !important;
  z-index: var(--bi-z-index-cookie-consent) !important;
  bottom: var(--bi-padding-medium) !important;
  left: 50% !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  /* dimensions */
  max-width: 1120px !important;
  width: calc(100% - 2 * var(--bi-padding-medium)) !important;
  /* spacing */
  margin: 0 auto !important;
  padding: var(--bi-padding-small) !important;

  /* Header */
  #CybotCookiebotDialogHeader {
    /* spacing */
    padding-bottom: var(--bi-padding-xsmall) !important;
    margin-bottom: var(--bi-padding-xsmall) !important;
  }

  /* Body */
  #CybotCookiebotDialogBody {
    /* spacing */
    padding: 0 !important;
  }

  /* Title */
  #CybotCookiebotDialogBodyContentTitle {
    /* typography */
    font-family: var(--bi-font-family-headline) !important;
    font-size: var(--bi-font-headline-m) !important;
    font-weight: var(--bi-font-weight-semibold) !important;
    line-height: var(--bi-line-height-tight) !important;
    /* color */
    color: var(--bi-color-text-secondary) !important;
    /* spacing */
    margin-bottom: var(--bi-padding-xsmall) !important;
  }

  /* Body text */
  #CybotCookiebotDialogBodyContentText {
    /* typography */
    font-family: var(--bi-font-family-primary) !important;
    font-size: var(--bi-font-label-s) !important;
    line-height: var(--bi-line-height-loose) !important;
    /* color */
    color: var(--bi-color-brand-grey-mid) !important;
  }

  /* Category labels */
  .CybotCookiebotDialogBodyLevelButtonLabel {
    /* typography */
    font-family: var(--bi-font-family-primary) !important;
    font-size: var(--bi-font-label-s) !important;
    font-weight: var(--bi-font-weight-semibold) !important;
    /* color */
    color: var(--bi-color-text-secondary) !important;
  }

  /* Tab navigation (Consent / Details / About) */
  .CybotCookiebotDialogNavItemLink {
    /* typography */
    font-family: var(--bi-font-family-primary) !important;
    font-size: var(--bi-font-label-s) !important;
    font-weight: var(--bi-font-weight-semibold) !important;
    /* color */
    color: var(--bi-color-text-secondary) !important;
    /* spacing */
    padding: var(--bi-padding-xxsmall) var(--bi-padding-xsmall) !important;
    border-radius: var(--bi-radius-none) !important;
    /* transition */
    transition: var(--transition-base) !important;

    &:hover {
      /* color */
      color: var(--bi-color-brand-primary) !important;
    }

    &.CybotCookiebotDialogActive,
    &[aria-selected='true'] {
      /* color */
      color: var(--bi-color-brand-primary) !important;
      border-bottom: var(--bi-stroke-thick) solid var(--bi-color-brand-primary) !important;
    }
  }

  /* Button row layout */
  #CybotCookiebotDialogBodyLevelButtonRow,
  #CybotCookiebotDialogBodyButtonsWrapper,
  #CybotCookiebotDialogBodyButtons {
    /* spacing */
    gap: var(--bi-padding-xsmall) !important;
    margin-top: var(--bi-padding-small) !important;
  }

  /* Shared button treatment — pill-shaped, matching the Button atom */
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
  #CybotCookiebotDialogBodyButtonDecline,
  #CybotCookiebotDialogBodyLevelButtonCustomize {
    /* typography */
    font-family: var(--bi-font-family-primary) !important;
    font-size: var(--bi-font-label-s) !important;
    font-weight: var(--bi-font-weight-semibold) !important;
    line-height: var(--bi-line-height-tight-small) !important;
    /* dimensions */
    min-height: 40px !important;
    /* spacing */
    padding: 0 32.5px !important;
    border-radius: var(--bi-radius-full) !important;
    /* cursor */
    cursor: pointer !important;
    /* transition */
    transition: var(--transition-base) !important;
  }

  /* "Alle akzeptieren" — primary (IDW red) */
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
    /* color */
    background: var(--bi-color-button-primary) !important;
    color: var(--bi-color-button-primary-text) !important;
    border: var(--bi-border-width) solid transparent !important;

    &:hover {
      background: var(--bi-color-button-primary-hover) !important;
    }

    &:active {
      background: var(--bi-color-button-primary-active) !important;
    }
  }

  /* "Auswahl bestätigen" — secondary button (navy, matches Button atom) */
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
    /* color */
    background: var(--bi-color-button-secondary) !important;
    color: var(--bi-color-base-white) !important;
    border: var(--bi-border-width) solid var(--bi-color-button-secondary) !important;

    &:hover {
      background: var(--bi-color-button-secondary-hover) !important;
      border-color: var(--bi-color-button-secondary-hover) !important;
      color: var(--bi-color-base-white) !important;
    }

    &:active {
      background: var(--bi-color-button-secondary-active) !important;
      border-color: var(--bi-color-button-secondary-active) !important;
      color: var(--bi-color-base-white) !important;
    }
  }

  /* "Ablehnen" — outline */
  #CybotCookiebotDialogBodyButtonDecline {
    /* color */
    background: transparent !important;
    color: var(--bi-color-text-secondary) !important;
    border: var(--bi-border-width) solid var(--bi-color-base-grey-400) !important;

    &:hover {
      background: var(--bi-color-base-grey-050) !important;
      border-color: var(--bi-color-base-grey-550) !important;
      color: var(--bi-color-text-secondary) !important;
    }

    &:active {
      background: var(--bi-color-base-grey-100) !important;
    }
  }

  /* "Details anzeigen" — customize link */
  #CybotCookiebotDialogBodyLevelButtonCustomize {
    /* color */
    background: transparent !important;
    color: var(--bi-color-link-primary) !important;
    border: var(--bi-border-width) solid transparent !important;
    /* typography */
    text-decoration: underline !important;
    text-underline-offset: var(--bi-padding-mini) !important;

    &:hover {
      /* color */
      color: var(--bi-color-link-primary-hover) !important;
    }
  }

  /* Toggle switch wrapper */
  .CybotCookiebotDialogBodyLevelButtonSliderWrapper {
    /* dimensions */
    width: 36px !important;
    height: 20px !important;
  }

  /* Toggle switch slider */
  .CybotCookiebotDialogBodyLevelButtonSlider {
    /* dimensions */
    width: 36px !important;
    height: 20px !important;
    border-radius: var(--bi-radius-full) !important;

    &::before {
      /* dimensions */
      width: 16px !important;
      height: 16px !important;
      /* position */
      top: 2px !important;
      left: 2px !important;
    }
  }

  input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
    /* color */
    background-color: var(--bi-color-button-primary) !important;

    &::before {
      /* transform */
      transform: translateX(16px) !important;
    }
  }

  input:not(:checked) + .CybotCookiebotDialogBodyLevelButtonSlider {
    /* color */
    background-color: var(--bi-color-base-grey-400) !important;
  }

  input:disabled + .CybotCookiebotDialogBodyLevelButtonSlider,
  input[disabled] + .CybotCookiebotDialogBodyLevelButtonSlider {
    /* color */
    background-color: var(--bi-color-base-grey-400) !important;
    opacity: 1 !important;
  }

  /* Category controls */
  #CybotCookiebotDialogBodyContentControls {
    /* spacing */
    padding: var(--bi-padding-xsmall) 0 !important;
  }

  .CybotCookiebotDialogBodyLevelButtonWrapper {
    /* spacing */
    margin: var(--bi-padding-xxsmall) 0 !important;
  }

  /* Links */
  a,
  a:visited {
    /* color */
    color: var(--bi-color-link-primary) !important;
  }

  a:hover {
    /* color */
    color: var(--bi-color-link-primary-hover) !important;
  }

  /* Focus (WCAG 2.2) */
  button:focus-visible,
  a:focus-visible,
  input:focus-visible + .CybotCookiebotDialogBodyLevelButtonSlider {
    outline: 2px solid var(--bi-color-focus) !important;
    outline-offset: 2px !important;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #CybotCookiebotDialog *,
  #CybotCookiebotDialogBodyUnderlay {
    transition: none !important;
  }
}
/* Mobile */
@media (max-width: 767px) {
  #CybotCookiebotDialog {
    /* dimensions */
    max-width: 100% !important;
    width: 100% !important;
    max-height: 66.67vh !important;
    /* overflow */
    overflow-y: auto !important;
    /* position */
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    /* spacing */
    padding: var(--bi-padding-xsmall) !important;
  }
}
/* Plyr media player styles (used by EmbedVideo molecule) */
@keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}}
@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes plyr-fade-in{0%{opacity:0}to{opacity:1}}
.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;align-items:center;direction:ltr;display:flex;flex-direction:column;font-family:inherit;font-family:var(--plyr-font-family,inherit);font-variant-numeric:tabular-nums;font-weight:400;font-weight:var(--plyr-font-weight-regular,400);line-height:1.7;line-height:var(--plyr-line-height,1.7);max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease;z-index:0}
.plyr audio,.plyr iframe,.plyr video{display:block;height:100%;width:100%}
.plyr button{font:inherit;line-height:inherit;width:auto}
.plyr:focus{outline:0}
.plyr--full-ui{box-sizing:border-box}
.plyr--full-ui *,.plyr--full-ui :after,.plyr--full-ui :before{box-sizing:inherit}
.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}
.plyr__badge{background:#4a5464;background:var(--plyr-badge-background,#4a5464);border-radius:2px;border-radius:var(--plyr-badge-border-radius,2px);color:#fff;color:var(--plyr-badge-text-color,#fff);font-size:9px;font-size:var(--plyr-font-size-badge,9px);line-height:1;padding:3px 4px}
.plyr--full-ui ::-webkit-media-text-track-container{display:none}
.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;display:none;font-size:13px;font-size:var(--plyr-font-size-small,13px);left:0;padding:10px;padding:var(--plyr-control-spacing,10px);position:absolute;text-align:center;transition:transform .4s ease-in-out;width:100%}
.plyr__captions span:empty{display:none}
@media (min-width:480px){.plyr__captions{font-size:15px;font-size:var(--plyr-font-size-base,15px);padding:20px;padding:calc(var(--plyr-control-spacing, 10px)*2)}}
@media (min-width:768px){.plyr__captions{font-size:18px;font-size:var(--plyr-font-size-large,18px)}}
.plyr--captions-active .plyr__captions{display:block}
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions{transform:translateY(-40px);transform:translateY(calc(var(--plyr-control-spacing, 10px)*-4))}
.plyr__caption{background:#000c;background:var(--plyr-captions-background,#000c);border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#fff;color:var(--plyr-captions-text-color,#fff);line-height:185%;padding:.2em .5em;white-space:pre-wrap}
.plyr__caption div{display:inline}
.plyr__control{background:#0000;border:0;border-radius:4px;border-radius:var(--plyr-control-radius,4px);color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7);position:relative;transition:all .1s ease-in-out}
.plyr__control svg{display:block;fill:currentColor;height:18px;height:var(--plyr-control-icon-size,18px);pointer-events:none;width:18px;width:var(--plyr-control-icon-size,18px)}
.plyr__control:focus{outline:0}
.plyr__control:focus-visible{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
a.plyr__control{text-decoration:none}
.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed,a.plyr__control:after,a.plyr__control:before{display:none}
.plyr--full-ui ::-webkit-media-controls{display:none}
.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}
.plyr__controls .plyr__progress__container{flex:1;min-width:0}
.plyr__controls .plyr__controls__item{margin-left:2.5px;margin-left:calc(var(--plyr-control-spacing, 10px)/4)}
.plyr__controls .plyr__controls__item:first-child{margin-left:0;margin-right:auto}
.plyr__controls .plyr__controls__item.plyr__progress__container{padding-left:2.5px;padding-left:calc(var(--plyr-control-spacing, 10px)/4)}
.plyr__controls .plyr__controls__item.plyr__time{padding:0 5px;padding:0 calc(var(--plyr-control-spacing, 10px)/2)}
.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,.plyr__controls .plyr__controls__item.plyr__time:first-child{padding-left:0}
.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip],.plyr__controls:empty{display:none}
.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}
.plyr__menu{display:flex;position:relative}
.plyr__menu .plyr__control svg{transition:transform .3s ease}
.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}
.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}
.plyr__menu__container{animation:plyr-popup .2s ease;background:#ffffffe6;background:var(--plyr-menu-background,#ffffffe6);border-radius:8px;border-radius:var(--plyr-menu-radius,8px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-menu-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-menu-color,#4a5464);font-size:15px;font-size:var(--plyr-font-size-base,15px);margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}
.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}
.plyr__menu__container:after{border:4px solid #0000;border-top-color:#ffffffe6;border:var(--plyr-menu-arrow-size,4px) solid #0000;border-top-color:var(--plyr-menu-background,#ffffffe6);content:"";height:0;position:absolute;right:14px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7 - var(--plyr-menu-arrow-size, 4px)/2);top:100%;width:0}
.plyr__menu__container [role=menu]{padding:7px;padding:calc(var(--plyr-control-spacing, 10px)*.7)}
.plyr__menu__container [role=menuitem],.plyr__menu__container [role=menuitemradio]{margin-top:2px}
.plyr__menu__container [role=menuitem]:first-child,.plyr__menu__container [role=menuitemradio]:first-child{margin-top:0}
.plyr__menu__container .plyr__control{align-items:center;color:#4a5464;color:var(--plyr-menu-color,#4a5464);display:flex;font-size:13px;font-size:var(--plyr-font-size-menu,var(--plyr-font-size-small,13px));padding:4.66667px 10.5px;padding:calc(var(--plyr-control-spacing, 10px)*.7/1.5) calc(var(--plyr-control-spacing, 10px)*.7*1.5);-webkit-user-select:none;user-select:none;width:100%}
.plyr__menu__container .plyr__control>span{align-items:inherit;display:flex;width:100%}
.plyr__menu__container .plyr__control:after{border:4px solid #0000;border:var(--plyr-menu-item-arrow-size,4px) solid #0000;content:"";position:absolute;top:50%;transform:translateY(-50%)}
.plyr__menu__container .plyr__control--forward{padding-right:28px;padding-right:calc(var(--plyr-control-spacing, 10px)*.7*4)}
.plyr__menu__container .plyr__control--forward:after{border-left-color:#728197;border-left-color:var(--plyr-menu-arrow-color,#728197);right:6.5px;right:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}
.plyr__menu__container .plyr__control--forward:focus-visible:after,.plyr__menu__container .plyr__control--forward:hover:after{border-left-color:initial}
.plyr__menu__container .plyr__control--back{font-weight:400;font-weight:var(--plyr-font-weight-regular,400);margin:7px;margin:calc(var(--plyr-control-spacing, 10px)*.7);margin-bottom:3.5px;margin-bottom:calc(var(--plyr-control-spacing, 10px)*.7/2);padding-left:28px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*4);position:relative;width:calc(100% - 14px);width:calc(100% - var(--plyr-control-spacing, 10px)*.7*2)}
.plyr__menu__container .plyr__control--back:after{border-right-color:#728197;border-right-color:var(--plyr-menu-arrow-color,#728197);left:6.5px;left:calc(var(--plyr-control-spacing, 10px)*.7*1.5 - var(--plyr-menu-item-arrow-size, 4px))}
.plyr__menu__container .plyr__control--back:before{background:#dcdfe5;background:var(--plyr-menu-back-border-color,#dcdfe5);box-shadow:0 1px 0 #fff;box-shadow:0 1px 0 var(--plyr-menu-back-border-shadow-color,#fff);content:"";height:1px;left:0;margin-top:3.5px;margin-top:calc(var(--plyr-control-spacing, 10px)*.7/2);overflow:hidden;position:absolute;right:0;top:100%}
.plyr__menu__container .plyr__control--back:focus-visible:after,.plyr__menu__container .plyr__control--back:hover:after{border-right-color:initial}
.plyr__menu__container .plyr__control[role=menuitemradio]{padding-left:7px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7)}
.plyr__menu__container .plyr__control[role=menuitemradio]:after,.plyr__menu__container .plyr__control[role=menuitemradio]:before{border-radius:100%}
.plyr__menu__container .plyr__control[role=menuitemradio]:before{background:#0000001a;content:"";display:block;flex-shrink:0;height:16px;margin-right:10px;margin-right:var(--plyr-control-spacing,10px);transition:all .3s ease;width:16px}
.plyr__menu__container .plyr__control[role=menuitemradio]:after{background:#fff;border:0;height:6px;left:12px;opacity:0;top:50%;transform:translateY(-50%) scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before{background:#00b2ff;background:var(--plyr-control-toggle-checked-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)))}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after{opacity:1;transform:translateY(-50%) scale(1)}
.plyr__menu__container .plyr__control[role=menuitemradio]:focus-visible:before,.plyr__menu__container .plyr__control[role=menuitemradio]:hover:before{background:#23282f1a}
.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:-5px;margin-right:calc(var(--plyr-control-spacing, 10px)*.7*-1 - -2px);overflow:hidden;padding-left:24.5px;padding-left:calc(var(--plyr-control-spacing, 10px)*.7*3.5);pointer-events:none}
.plyr--full-ui input[type=range]{appearance:none;background:#0000;border:0;border-radius:26px;border-radius:calc(var(--plyr-range-thumb-height, 13px)*2);color:#00b2ff;color:var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));display:block;height:19px;height:calc(var(--plyr-range-thumb-active-shadow-width, 3px)*2 + var(--plyr-range-thumb-height, 13px));margin:0;min-width:0;padding:0;transition:box-shadow .3s ease;width:100%}
.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:#0000;background-image:linear-gradient(90deg,currentColor 0,#0000 0);background-image:linear-gradient(to right,currentColor var(--value,0),#0000 var(--value,0));border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-webkit-transition:box-shadow .3s ease;transition:box-shadow .3s ease;-webkit-user-select:none;user-select:none}
.plyr--full-ui input[type=range]::-webkit-slider-thumb{appearance:none;background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:-4px;margin-top:calc((var(--plyr-range-thumb-height, 13px) - var(--plyr-range-track-height, 5px))/2*-1);position:relative;-webkit-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}
.plyr--full-ui input[type=range]::-moz-range-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}
.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px)}
.plyr--full-ui input[type=range]::-ms-track{color:#0000}
.plyr--full-ui input[type=range]::-ms-fill-upper,.plyr--full-ui input[type=range]::-ms-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
.plyr--full-ui input[type=range]::-ms-fill-lower{background:#0000;background:currentColor;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:0;position:relative;-ms-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}
.plyr--full-ui input[type=range]::-ms-tooltip{display:none}
.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}
.plyr--full-ui input[type=range]:focus{outline:0}
.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
.plyr--full-ui input[type=range]:focus-visible::-moz-range-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
.plyr--full-ui input[type=range]:focus-visible::-ms-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
.plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1}
.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1}
.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster{display:none}
.plyr__time{font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}
.plyr__time+.plyr__time:before{content:"⁄";margin-right:10px;margin-right:var(--plyr-control-spacing,10px)}
@media (max-width:767px){.plyr__time+.plyr__time{display:none}}
.plyr__tooltip{background:#fff;background:var(--plyr-tooltip-background,#fff);border-radius:5px;border-radius:var(--plyr-tooltip-radius,5px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);color:#4a5464;color:var(--plyr-tooltip-color,#4a5464);font-size:13px;font-size:var(--plyr-font-size-small,13px);font-weight:400;font-weight:var(--plyr-font-weight-regular,400);left:50%;line-height:1.3;margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:5px 7.5px;padding:calc(var(--plyr-control-spacing, 10px)/2) calc(var(--plyr-control-spacing, 10px)/2*1.5);pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;white-space:nowrap;z-index:2}
.plyr__tooltip:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #fff;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#fff);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:"";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}
.plyr .plyr__control:focus-visible .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%) scale(1)}
.plyr .plyr__control:hover .plyr__tooltip{z-index:3}
.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translateY(10px) scale(.8);transform-origin:0 100%}
.plyr__controls>.plyr__control:first-child .plyr__tooltip:before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip:before{left:16px;left:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7)}
.plyr__controls>.plyr__control:last-child .plyr__tooltip{left:auto;right:0;transform:translateY(10px) scale(.8);transform-origin:100% 100%}
.plyr__controls>.plyr__control:last-child .plyr__tooltip:before{left:auto;right:16px;right:calc(var(--plyr-control-icon-size, 18px)/2 + var(--plyr-control-spacing, 10px)*.7);transform:translateX(50%)}
.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child:focus-visible .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0) scale(1)}
.plyr__progress{left:6.5px;left:calc(var(--plyr-range-thumb-height, 13px)*.5);margin-right:13px;margin-right:var(--plyr-range-thumb-height,13px);position:relative}
.plyr__progress input[type=range],.plyr__progress__buffer{margin-left:-6.5px;margin-left:calc(var(--plyr-range-thumb-height, 13px)*-.5);margin-right:-6.5px;margin-right:calc(var(--plyr-range-thumb-height, 13px)*-.5);width:calc(100% + 13px);width:calc(100% + var(--plyr-range-thumb-height, 13px))}
.plyr__progress input[type=range]{position:relative;z-index:2}
.plyr__progress .plyr__tooltip{left:0;max-width:120px;overflow-wrap:break-word}
.plyr__progress__buffer{-webkit-appearance:none;background:#0000;border:0;border-radius:100px;height:5px;height:var(--plyr-range-track-height,5px);left:0;margin-top:-2.5px;margin-top:calc(var(--plyr-range-track-height, 5px)/2*-1);padding:0;position:absolute;top:50%}
.plyr__progress__buffer::-webkit-progress-bar{background:#0000}
.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease}
.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease}
.plyr__progress__buffer::-ms-fill{border-radius:100px;-ms-transition:width .2s ease;transition:width .2s ease}
.plyr--loading .plyr__progress__buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99) 25%,#0000 25%,#0000 50%,var(--plyr-progress-loading-background,#23282f99) 50%,var(--plyr-progress-loading-background,#23282f99) 75%,#0000 75%,#0000);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:#0000}
.plyr--video.plyr--loading .plyr__progress__buffer{background-color:#ffffff40;background-color:var(--plyr-video-progress-buffered-background,#ffffff40)}
.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:#c1c8d199;background-color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}
.plyr__progress__marker{background-color:#fff;background-color:var(--plyr-progress-marker-background,#fff);border-radius:1px;height:5px;height:var(--plyr-range-track-height,5px);position:absolute;top:50%;transform:translate(-50%,-50%);width:3px;width:var(--plyr-progress-marker-width,3px);z-index:3}
.plyr__volume{align-items:center;display:flex;position:relative}
.plyr__volume input[type=range]{margin-left:5px;margin-left:calc(var(--plyr-control-spacing, 10px)/2);margin-right:5px;margin-right:calc(var(--plyr-control-spacing, 10px)/2);max-width:90px;min-width:60px;position:relative;z-index:2}
.plyr--audio{display:block}
.plyr--audio .plyr__controls{background:#fff;background:var(--plyr-audio-controls-background,#fff);border-radius:inherit;color:#4a5464;color:var(--plyr-audio-control-color,#4a5464);padding:10px;padding:var(--plyr-control-spacing,10px)}
.plyr--audio .plyr__control:focus-visible,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)}
.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
.plyr--audio .plyr__progress__buffer{color:#c1c8d199;color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}
.plyr--video{overflow:hidden}
.plyr--video.plyr--menu-open{overflow:visible}
.plyr__video-wrapper{background:#000;background:var(--plyr-video-background,var(--plyr-video-background,#000));border-radius:inherit;height:100%;margin:auto;overflow:hidden;position:relative;width:100%}
.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{aspect-ratio:16/9}
@supports not (aspect-ratio:16/9){.plyr__video-embed,.plyr__video-wrapper--fixed-ratio{height:0;padding-bottom:56.25%;position:relative}}
.plyr__video-embed iframe,.plyr__video-wrapper--fixed-ratio video{border:0;height:100%;left:0;position:absolute;top:0;width:100%}
.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;transform:translateY(-38.28125%)}
.plyr--video .plyr__controls{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;color:var(--plyr-video-control-color,#fff);left:0;padding:5px;padding:calc(var(--plyr-control-spacing, 10px)/2);padding-top:20px;padding-top:calc(var(--plyr-control-spacing, 10px)*2);position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:3}
@media (min-width:480px){.plyr--video .plyr__controls{padding:10px;padding:var(--plyr-control-spacing,10px);padding-top:35px;padding-top:calc(var(--plyr-control-spacing, 10px)*3.5)}}
.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}
.plyr--video .plyr__control:focus-visible,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-video-control-color-hover,#fff)}
.plyr__control--overlaid{background:#00b2ff;background:var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));border:0;border-radius:100%;color:#fff;color:var(--plyr-video-control-color,#fff);display:none;left:50%;opacity:.9;padding:15px;padding:calc(var(--plyr-control-spacing, 10px)*1.5);position:absolute;top:50%;transform:translate(-50%,-50%);transition:.3s;z-index:2}
.plyr__control--overlaid svg{left:2px;position:relative}
.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{opacity:1}
.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}
.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}
.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
.plyr--video .plyr__progress__buffer{color:#ffffff40;color:var(--plyr-video-progress-buffered-background,#ffffff40)}
.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}
.plyr:fullscreen video{height:100%}
.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}
.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}
.plyr:fullscreen.plyr--hide-controls{cursor:none}
@media (min-width:1024px){.plyr:fullscreen .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}
.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;inset:0;margin:0;position:fixed;width:100%;z-index:10000000}
.plyr--fullscreen-fallback video{height:100%}
.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}
.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}
.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}
@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px;font-size:var(--plyr-font-size-xlarge,21px)}}
.plyr__ads{border-radius:inherit;cursor:pointer;inset:0;overflow:hidden;position:absolute;z-index:-1}
.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}
.plyr__ads:after{background:#23282f;border-radius:2px;bottom:10px;bottom:var(--plyr-control-spacing,10px);color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;right:var(--plyr-control-spacing,10px);z-index:3}
.plyr__ads:empty:after{display:none}
.plyr__cues{background:currentColor;display:block;height:5px;height:var(--plyr-range-track-height,5px);left:0;opacity:.8;position:absolute;top:50%;transform:translateY(-50%);width:3px;z-index:3}
.plyr__preview-thumb{background-color:#fff;background-color:var(--plyr-tooltip-background,#fff);border-radius:8px;border-radius:var(--plyr-menu-radius,8px);bottom:100%;box-shadow:0 1px 2px #00000026;box-shadow:var(--plyr-tooltip-shadow,0 1px 2px #00000026);margin-bottom:10px;margin-bottom:calc(var(--plyr-control-spacing, 10px)/2*2);opacity:0;padding:3px;pointer-events:none;position:absolute;transform:translateY(10px) scale(.8);transform-origin:50% 100%;transition:transform .2s ease .1s,opacity .2s ease .1s;z-index:2}
.plyr__preview-thumb--is-shown{opacity:1;transform:translate(0) scale(1)}
.plyr__preview-thumb:before{border-left:4px solid #0000;border-left:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-right:4px solid #0000;border-right:var(--plyr-tooltip-arrow-size,4px) solid #0000;border-top:4px solid #fff;border-top:var(--plyr-tooltip-arrow-size,4px) solid var(--plyr-tooltip-background,#fff);bottom:-4px;bottom:calc(var(--plyr-tooltip-arrow-size, 4px)*-1);content:"";height:0;left:calc(50% + var(--preview-arrow-offset));position:absolute;transform:translateX(-50%);width:0;z-index:2}
.plyr__preview-thumb__image-container{background:#c1c8d1;border-radius:7px;border-radius:calc(var(--plyr-menu-radius, 8px) - 1px);overflow:hidden;position:relative;z-index:0}
.plyr__preview-thumb__image-container img,.plyr__preview-thumb__image-container:after{height:100%;left:0;position:absolute;top:0;width:100%}
.plyr__preview-thumb__image-container:after{border-radius:inherit;box-shadow:inset 0 0 0 1px #00000026;content:"";pointer-events:none}
.plyr__preview-thumb__image-container img{max-height:none;max-width:none}
.plyr__preview-thumb__time-container{background:linear-gradient(#0000,#000000bf);background:var(--plyr-video-controls-background,linear-gradient(#0000,#000000bf));border-bottom-left-radius:7px;border-bottom-left-radius:calc(var(--plyr-menu-radius, 8px) - 1px);border-bottom-right-radius:7px;border-bottom-right-radius:calc(var(--plyr-menu-radius, 8px) - 1px);bottom:0;left:0;line-height:1.1;padding:20px 6px 6px;position:absolute;right:0;z-index:3}
.plyr__preview-thumb__time-container span{color:#fff;font-size:13px;font-size:var(--plyr-font-size-time,var(--plyr-font-size-small,13px))}
.plyr__preview-scrubbing{filter:blur(1px);height:100%;inset:0;margin:auto;opacity:0;overflow:hidden;pointer-events:none;position:absolute;transition:opacity .3s ease;width:100%;z-index:1}
.plyr__preview-scrubbing--is-shown{opacity:1}
.plyr__preview-scrubbing img{height:100%;left:0;max-height:none;max-width:none;object-fit:contain;position:absolute;top:0;width:100%}
.plyr--no-transition{transition:none!important}
.plyr__sr-only{clip:rect(1px,1px,1px,1px);border:0!important;height:1px!important;overflow:hidden;padding:0!important;position:absolute!important;width:1px!important}
.plyr [hidden]{display:none!important}