/* Compact settings disclosure. No change to the station navigation's layout. */
.settings { position: relative; flex: 0 0 auto; }
.settings-trigger { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 10px; margin: 0; border: 0; border-radius: 0;
  color: #fff; background: transparent; cursor: pointer; box-shadow: none; text-shadow: none; }
.settings-trigger:is(:hover, [aria-expanded="true"]) { border: 0; }
.settings-trigger:focus-visible, .settings-panel .aktion:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px; }
.settings-panel { display: none; position: fixed; inset: auto; top: var(--settings-top, 100px);
  left: var(--settings-left, auto); right: auto; z-index: 20; margin: 0;
  width: 248px; max-width: calc(100vw - 24px); max-height: calc(100dvh - var(--settings-top, 100px) - 12px);
  overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
  padding: 16px 20px; color: var(--text); font-family: var(--ci-font-family, "Montserrat", sans-serif);
  font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .04em;
  text-transform: none; text-shadow: none; }
.settings-panel[data-open] { display: block; }
.settings-panel:popover-open { display: block; }
.settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; margin: -8px 0 4px; }
.settings-heading .icon-action { width: 46px; padding: 10px 11px; }
.settings-panel h2 { margin: 0; padding: 0; color: inherit;
  font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.control-icon { display: block; flex: none; width: 24px; height: 24px; pointer-events: none; }
.control-icon-off { display: none; color: #ea0313; stroke: #ea0313; stroke-width: 2.4; }
.media-toggle { display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 11px;
  margin: 0; border: 1px solid #73777e; border-radius: 3px;
  background: transparent; color: #fff; cursor: pointer; box-shadow: none; text-shadow: none; }
.media-toggle[aria-pressed="false"] .control-icon-base { color: #9da3ad; stroke: #9da3ad; }
.media-toggle[aria-pressed="false"] .control-icon-off { display: initial; }
.media-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.media-toggle:hover { background-color: transparent; }
.settings-panel #b-sound, .settings-panel #b-bewegung {
  display: flex; align-items: center; width: 100%; min-width: 0; min-height: 48px;
  justify-content: flex-start; gap: 12px; margin: 0; padding: 8px 0; border: 0;
  background: transparent; color: inherit; cursor: pointer; font: inherit;
  letter-spacing: .04em; text-transform: none; box-shadow: none; text-shadow: none; }
.setting-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.settings-state { margin-left: auto; font-size: 12px; color: #b7bbc3; }   /* V19.17 (Owner 24.10., Lesbarkeit): 12 statt 11 px */
.settings-switch { position: relative; display: block; flex: none; box-sizing: border-box;
  width: 46px; height: 28px; padding: 2px; border: 1px solid #73777e; border-radius: 999px;
  background: #34383f; transition: background-color 140ms ease; }
.settings-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; transition: left 140ms ease; }
.setting-toggle[aria-checked="true"] .settings-switch { background: #ea0313; border-color: #ea0313; }
.setting-toggle[aria-checked="true"] .settings-switch::after { left: 20px; }
.setting-toggle[aria-checked="false"] .settings-name { color: #b7bbc3; }
.setting-toggle[aria-checked="true"] .settings-name { color: inherit; }
html[data-bewegung="aus"] .settings-switch,
html[data-bewegung="aus"] .settings-switch::after { transition: none; }
@media (prefers-reduced-motion: reduce) { .settings-switch, .settings-switch::after { transition: none; } }
/* Older browsers lack a top layer; the header is overflow-visible and this local
   fallback is absolutely positioned, unaffected by its backdrop-filter. */
.settings-panel[data-settings-fallback] { position: absolute; top: calc(100% + 8px); left: auto; right: 0;
  max-height: calc(100dvh - 150px); }