/* Fesselliebe Quick Panel 1.4 - compact responsive layout */
#brp-radio-panel {
  --brp-accent: #d00032;
  --brp-shell-color: #1c1f22;
  --brp-key-color: #30353a;
  --brp-screen-color: #d9e1d1;
  --brp-screen-ink: #172018;
  --brp-panel-width: 258px;
  --brp-mobile-width: 262px;
  --brp-font-scale: 1.08;
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 1045;
  transform: translateY(-50%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.2;
  pointer-events: none;
}
#brp-radio-panel *, #brp-radio-panel *::before, #brp-radio-panel *::after { box-sizing: border-box; }
#brp-radio-panel a { text-decoration: none; }
#brp-radio-panel button, #brp-radio-panel input { font: inherit; }
html.brp-lock, html.brp-lock body { overflow: hidden; }

.brp-device {
  width: var(--brp-panel-width);
  max-height: min(92vh, 760px);
  color: #f5f5f5;
  transform: translateX(calc(100% - 40px));
  transition: transform .28s cubic-bezier(.2,.8,.2,1), filter .28s ease;
  filter: drop-shadow(-10px 16px 26px rgba(0,0,0,.28));
  pointer-events: auto;
  position: relative;
}
.brp-desktop-open .brp-device { transform: translateX(0); }
.brp-device::before {
  content: "";
  position: absolute;
  inset: 54px 0 10px;
  border-radius: 28px 0 0 28px;
  background: linear-gradient(105deg, color-mix(in srgb, var(--brp-shell-color) 70%, #777) 0, var(--brp-shell-color) 34%, color-mix(in srgb, var(--brp-shell-color) 72%, #000) 100%);
  border: 2px solid color-mix(in srgb, var(--brp-shell-color) 30%, #000);
  z-index: -1;
}
.brp-device-top { height: 66px; position: relative; margin-right: 12px; }
.brp-knob {
  position: absolute; left: 38px; bottom: 1px; width: 52px; height: 38px;
  border-radius: 11px 11px 5px 5px;
  background: repeating-linear-gradient(90deg,#121416 0 6px,#34383c 6px 10px);
  border: 2px solid #080909;
}
.brp-antenna {
  position: absolute; right: 40px; top: -48px; width: 42px; height: 116px;
  border-radius: 17px 17px 8px 8px;
  background: linear-gradient(90deg,#101214,#32363a 42%,#16191c);
  border: 2px solid #080909;
}
.brp-antenna::after {
  content: ""; position: absolute; left: -5px; right: -5px; bottom: 0; height: 9px;
  border-radius: 3px; background: var(--brp-accent); box-shadow: 0 0 0 2px #111;
}
.brp-antenna i { display:block; width: 17px; height: 2px; background:#050606; margin: 73px auto 0; box-shadow:0 5px 0 #050606; }
.brp-status-led { position:absolute; left: 106px; bottom: 9px; width: 14px; height: 6px; border-radius: 999px; background:var(--brp-accent); box-shadow:0 0 8px color-mix(in srgb, var(--brp-accent) 70%, transparent); }

.brp-shell {
  position: relative;
  padding: 11px 14px 14px;
  border-radius: 24px 0 0 24px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.055) 0 1px, transparent 1.5px) 0 0/7px 7px,
    linear-gradient(115deg, color-mix(in srgb, var(--brp-shell-color) 76%, #707070), var(--brp-shell-color) 72%);
  border: 2px solid color-mix(in srgb, var(--brp-shell-color) 30%, #000);
  border-right: 0;
  box-shadow: inset 9px 0 14px rgba(255,255,255,.03), inset -7px 0 12px rgba(0,0,0,.55);
  overflow: hidden;
}
.brp-brandbar { min-height: 34px; display:flex; align-items:center; gap:8px; padding: 2px 1px 8px; letter-spacing:.075em; }
.brp-brandbar strong { font-size:calc(13.5px * var(--brp-font-scale)); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brp-mark { display:flex; gap:2px; align-items:flex-end; width:23px; height:18px; border:1px solid #596067; padding:3px; border-radius:4px; }
.brp-mark i { flex:1; background:var(--brp-accent); border-radius:1px; }
.brp-mark i:nth-child(1){height:5px}.brp-mark i:nth-child(2){height:10px}.brp-mark i:nth-child(3){height:7px}
.brp-collapse { width:28px; height:26px; border:1px solid #070808; border-radius:7px; background:color-mix(in srgb,var(--brp-key-color) 86%,#fff); color:#fff; display:grid; place-items:center; cursor:pointer; }
.brp-collapse svg { width:17px; fill:currentColor; }

.brp-screen {
  border: 6px solid #0a0b0c;
  border-radius: 9px;
  background: linear-gradient(160deg, color-mix(in srgb,var(--brp-screen-color) 88%,#fff), var(--brp-screen-color));
  color:var(--brp-screen-ink);
  box-shadow: inset 0 0 0 2px color-mix(in srgb,var(--brp-screen-color) 55%,#555), inset 0 -10px 28px rgba(65,82,66,.08), 0 2px 0 #4a5055;
  min-height: 180px;
  overflow:hidden;
}
.brp-screen-topline { height:29px; border-bottom:1px solid color-mix(in srgb,var(--brp-screen-ink) 22%,transparent); display:flex; align-items:center; justify-content:space-between; padding:0 8px; font-size:calc(10.2px * var(--brp-font-scale)); font-weight:900; letter-spacing:.055em; }
.brp-signal { display:inline-flex; height:11px; gap:1px; align-items:flex-end; margin-right:4px; }
.brp-signal b { width:3px; background:color-mix(in srgb,var(--brp-screen-ink) 72%,#5a9b58); display:block; }.brp-signal b:nth-child(1){height:3px}.brp-signal b:nth-child(2){height:5px}.brp-signal b:nth-child(3){height:8px}.brp-signal b:nth-child(4){height:11px}
.brp-battery { width:21px; height:11px; border:1.5px solid var(--brp-screen-ink); padding:1px; position:relative; }
.brp-battery::after { content:""; position:absolute; width:2px; height:5px; right:-4px; top:2px; background:var(--brp-screen-ink); }
.brp-battery i { display:block; height:100%; width:84%; background:linear-gradient(90deg,#5f9d59,#86bb6a); }
.brp-screen-main { padding:9px 8px 7px; text-align:center; min-height:116px; display:flex; flex-direction:column; justify-content:center; }
.brp-channel { font-size:calc(10.4px * var(--brp-font-scale)); letter-spacing:.1em; font-weight:900; opacity:.74; }
.brp-cart-line { font-size:calc(34px * var(--brp-font-scale)); margin:4px 0 0; line-height:1; }
.brp-cart-line small { font-size:calc(11px * var(--brp-font-scale)); font-weight:900; margin-left:3px; }
.brp-total { font-size:calc(19px * var(--brp-font-scale)); font-weight:950; margin-top:4px; }
.brp-last { min-height:16px; margin-top:6px; padding:0 2px; font-size:calc(10.4px * var(--brp-font-scale)); font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brp-screen-textline {
  min-height:31px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 8px;
  border-top:1px solid color-mix(in srgb,var(--brp-screen-ink) 38%,transparent);
  background:color-mix(in srgb,var(--brp-screen-color) 72%,#6d9bb0);
  color:var(--brp-screen-ink);
  font-size:calc(9.7px * var(--brp-font-scale));
  font-weight:900;
  letter-spacing:.035em;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.brp-search { margin:8px 0 1px; padding:8px; border-radius:8px; background:#0d0f10; border:1px solid #3d4246; }
.brp-search label { display:block; font-size:calc(9.5px * var(--brp-font-scale)); text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; color:#c2c7ca; }
.brp-search > div { display:flex; gap:5px; }
.brp-search input { min-width:0; flex:1; height:35px; background:#e8ede5; border:0; border-radius:5px; color:#111; padding:0 8px; font-size:calc(11px * var(--brp-font-scale)); outline:none; }
.brp-search input:focus { box-shadow:0 0 0 2px var(--brp-accent); }
.brp-search button { width:36px; border:0; border-radius:5px; background:var(--brp-accent); color:#111; cursor:pointer; display:grid; place-items:center; }
.brp-search svg { width:18px; fill:currentColor; }

.brp-navpad {
  width:106px;
  margin:9px auto 6px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,22px);
  grid-template-areas:". up ." "left dot right" ". down .";
  place-items:center;
  color:#e9ecee;
  background:color-mix(in srgb,var(--brp-key-color) 78%,#111);
  border:2px solid #090a0b;
  border-radius:12px;
  box-shadow:inset 0 0 0 1px #464b50;
  font-size:calc(9.5px * var(--brp-font-scale));
}
.brp-navpad button, .brp-navpad a {
  appearance:none;
  border:0;
  margin:0;
  padding:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  display:grid;
  place-items:center;
  line-height:1;
  text-decoration:none;
}
.brp-navpad button { width:28px; height:22px; }
.brp-navpad button:hover, .brp-navpad button:focus-visible, .brp-nav-dot:hover, .brp-nav-dot:focus-visible { color:var(--brp-accent); outline:none; }
.brp-nav-up { grid-area:up; }
.brp-nav-left { grid-area:left; }
.brp-nav-right { grid-area:right; }
.brp-nav-down { grid-area:down; }
.brp-nav-dot { grid-area:dot; width:11px; height:11px; border-radius:50%; background:var(--brp-accent) !important; box-shadow:0 0 0 4px #121416, 0 0 8px color-mix(in srgb,var(--brp-accent) 55%,transparent); }
.brp-nav-dot:hover, .brp-nav-dot:focus-visible { transform:scale(1.12); }
.brp-speaker { height:18px; margin:0 10px 8px; border-radius:9px; background:#090a0b; border:1px solid #444; display:flex; gap:4px; align-items:center; justify-content:center; overflow:hidden; }
.brp-speaker i { height:2px; width:18px; background:#34383b; box-shadow:0 4px 0 #34383b, 0 -4px 0 #34383b; }

.brp-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.brp-key {
  min-width:0; min-height:55px; padding:4px 2px 5px; border:1px solid #070809; border-radius:8px;
  background:linear-gradient(color-mix(in srgb,var(--brp-key-color) 84%,#fff), color-mix(in srgb,var(--brp-key-color) 83%,#000)); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 2px rgba(0,0,0,.35);
  cursor:pointer; display:grid; grid-template-columns:15px 1fr; grid-template-rows:1fr auto; align-items:center; text-align:left; position:relative;
}
.brp-key:hover, .brp-key:focus-visible { color:#fff; outline:none; border-color:color-mix(in srgb,var(--brp-accent) 65%,#111); box-shadow:0 0 0 2px color-mix(in srgb,var(--brp-accent) 28%,transparent), inset 0 1px 0 rgba(255,255,255,.12); }
.brp-key:active { transform:translateY(1px); }
.brp-key svg { width:20px; height:20px; fill:currentColor; grid-column:2; justify-self:center; opacity:.95; }
.brp-key .brp-num { grid-row:1; grid-column:1; font-weight:950; font-size:calc(10.8px * var(--brp-font-scale)); color:#eef0f1; align-self:start; padding-top:2px; }
.brp-key small { grid-column:1 / -1; font-size:calc(9.1px * var(--brp-font-scale)); line-height:1.05; letter-spacing:0; color:#eef0f1; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800; }
.brp-key small b { display:inline-grid; place-items:center; min-width:15px; height:15px; padding:0 3px; border-radius:8px; background:var(--brp-accent); color:#111; font-size:calc(8px * var(--brp-font-scale)); }
.brp-key-cart svg { color:#d5f1de; }
.brp-key-checkout { background:linear-gradient(color-mix(in srgb,var(--brp-accent) 72%,var(--brp-key-color)),color-mix(in srgb,var(--brp-accent) 56%,#151719)); color:#111; }
.brp-key-checkout small,.brp-key-checkout .brp-num{color:#151515}
.brp-key-disabled { opacity:.48; cursor:default; }
.brp-key-disabled:hover { border-color:#070809; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 2px rgba(0,0,0,.35); }

.brp-bottomkeys { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
.brp-bottomkeys button,.brp-bottomkeys a { min-height:35px; border:1px solid #070808; border-radius:8px; background:color-mix(in srgb,var(--brp-key-color) 80%,#111); color:#f3f4f5; font-size:calc(9.6px * var(--brp-font-scale)); font-weight:900; display:flex; align-items:center; justify-content:center; gap:5px; cursor:pointer; }
.brp-bottomkeys a { background:#20382c; }.brp-bottomkeys span{font-size:calc(13px * var(--brp-font-scale));color:var(--brp-accent)}

.brp-subpanel { position:absolute; inset:45px 10px 14px 10px; z-index:5; padding:10px; border-radius:14px 4px 4px 14px; background:rgba(14,16,18,.985); border:1px solid #454b50; box-shadow:0 16px 35px rgba(0,0,0,.4); overflow:auto; }
.brp-subpanel-head { display:flex; align-items:center; justify-content:space-between; padding:2px 3px 10px; }
.brp-subpanel-head strong { font-size:calc(12px * var(--brp-font-scale)); letter-spacing:.08em; }.brp-subpanel-head button{width:28px;height:28px;border:0;border-radius:7px;background:#32373c;color:#fff;font-size:20px;cursor:pointer}
.brp-category-list { display:flex; flex-direction:column; gap:5px; }
.brp-category-list a { min-height:40px; padding:0 10px; border-radius:7px; background:#25292d; color:#f6f7f7; display:flex; align-items:center; justify-content:space-between; font-size:calc(10.8px * var(--brp-font-scale)); font-weight:800; }
.brp-category-list a:hover { background:#30363b; color:#fff; }.brp-category-list span{color:var(--brp-accent);font-size:20px}


.brp-panel-trigger,
.brp-backdrop { display:none; }

/* Recognisable pull tab shown whenever the panel itself is collapsed. */
.brp-panel-trigger {
  appearance:none;
  border:2px solid #090a0b;
  background:linear-gradient(115deg,color-mix(in srgb,var(--brp-shell-color) 72%,#74797d),var(--brp-shell-color) 58%,color-mix(in srgb,var(--brp-shell-color) 78%,#000));
  color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.32), inset 1px 0 0 rgba(255,255,255,.08);
  cursor:pointer;
  pointer-events:auto;
  position:relative;
  align-items:center;
  justify-content:flex-start;
  flex-direction:column;
  gap:4px;
  width:70px;
  min-height:102px;
  padding:10px 7px 8px;
  border-radius:18px 0 0 18px;
  overflow:visible;
  transition:transform .18s ease, filter .18s ease;
}
.brp-panel-trigger:hover,
.brp-panel-trigger:focus-visible {
  filter:brightness(1.12);
  outline:none;
  transform:translateX(-3px);
}
.brp-trigger-radio {
  width:34px;
  height:43px;
  border:2px solid #070809;
  border-radius:7px 7px 8px 8px;
  background:linear-gradient(115deg,#353a3f,#171a1d 72%);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  padding-top:8px;
}
.brp-trigger-antenna {
  position:absolute;
  right:5px;
  top:-12px;
  width:8px;
  height:15px;
  border:1px solid #050606;
  border-radius:4px 4px 2px 2px;
  background:#202326;
}
.brp-trigger-led {
  position:absolute;
  left:5px;
  top:4px;
  width:9px;
  height:3px;
  border-radius:4px;
  background:var(--brp-accent);
  box-shadow:0 0 6px color-mix(in srgb,var(--brp-accent) 70%,transparent);
}
.brp-trigger-screen {
  width:23px;
  height:11px;
  display:grid;
  place-items:center;
  margin-top:1px;
  border:1px solid #080909;
  border-radius:2px;
  background:var(--brp-screen-color);
  color:var(--brp-screen-ink);
  font-style:normal;
  font-size:6px;
  line-height:1;
  font-weight:950;
  letter-spacing:.05em;
}
.brp-trigger-keys {
  width:22px;
  margin-top:5px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
}
.brp-trigger-keys b {
  width:5px;
  height:4px;
  border-radius:1px;
  background:#686e72;
  box-shadow:0 1px 0 #060707;
}
.brp-trigger-label {
  font-size:10px;
  line-height:.95;
  font-weight:950;
  letter-spacing:.08em;
  text-align:center;
  color:#f7f7f7;
}
.brp-trigger-chevron {
  position:absolute;
  left:3px;
  top:50%;
  transform:translateY(-50%);
  font-size:22px;
  line-height:1;
  color:var(--brp-accent);
  font-weight:900;
}
.brp-trigger-count {
  position:absolute;
  right:4px;
  bottom:5px;
  min-width:22px;
  height:20px;
  padding:0 5px;
  border-radius:10px;
  background:var(--brp-accent);
  color:#111;
  font-size:11px;
  line-height:20px;
  font-weight:950;
  text-align:center;
  box-shadow:0 0 0 2px #151719;
}

/* Desktop: the radio is open by default. If the user folds it away, the
   device leaves the viewport completely and a dedicated, clickable pull tab
   appears. This avoids the old non-clickable 40 px rail. */
@media (min-width: 768px) {
  #brp-radio-panel:not(.brp-desktop-open) .brp-device {
    transform:translateX(110%);
  }
  #brp-radio-panel:not(.brp-desktop-open) .brp-desktop-trigger {
    display:flex;
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
  }
  #brp-radio-panel:not(.brp-desktop-open) .brp-desktop-trigger:hover,
  #brp-radio-panel:not(.brp-desktop-open) .brp-desktop-trigger:focus-visible {
    transform:translate(-3px,-50%);
  }
  #brp-radio-panel.brp-desktop-open .brp-desktop-trigger { display:none; }
  #brp-radio-panel:not(.brp-desktop-open) .brp-collapse svg { transform:rotate(180deg); }
}

@media (max-width: 767.98px) {
  /* The collapsed control sits in the middle of the right edge instead of
     competing with browser / cookie controls in the lower corner. */
  #brp-radio-panel {
    top:50%;
    bottom:auto;
    right:0;
    transform:translateY(-50%);
  }

  .brp-device {
    position:fixed;
    top:50%;
    right:0;
    bottom:auto;
    width:min(calc(100vw - 72px), var(--brp-mobile-width));
    max-height:calc(100dvh - 24px);
    transform:translate(105%,-50%);
    filter:drop-shadow(-12px 0 24px rgba(0,0,0,.38));
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    padding-top:36px;
    scrollbar-width:none;
  }
  .brp-device::-webkit-scrollbar { width:0; height:0; display:none; }
  .brp-desktop-open .brp-device { transform:translate(105%,-50%); }
  #brp-radio-panel.brp-mobile-open .brp-device { transform:translate(0,-50%); }

  /* Compact top hardware: still recognisable as a radio, but it no longer
     wastes a large vertical strip on small screens. */
  .brp-device-top { position:absolute; top:0; right:0; left:0; height:42px; margin-right:8px; }
  .brp-antenna { top:-24px; right:34px; width:34px; height:67px; border-radius:13px 13px 6px 6px; }
  .brp-antenna::after { height:7px; left:-4px; right:-4px; }
  .brp-antenna i { width:13px; margin-top:42px; }
  .brp-knob { left:28px; bottom:1px; width:42px; height:29px; border-radius:9px 9px 4px 4px; }
  .brp-status-led { left:84px; bottom:7px; width:12px; height:5px; }

  .brp-shell {
    min-height:0;
    border-radius:21px 0 0 21px;
    border-bottom:2px solid color-mix(in srgb, var(--brp-shell-color) 30%, #000);
    padding:8px 10px 10px;
    overflow:hidden;
  }
  .brp-brandbar { min-height:29px; gap:6px; padding:1px 0 6px; }
  .brp-brandbar strong { font-size:calc(12px * var(--brp-font-scale)); }
  .brp-mark { width:20px; height:16px; padding:3px; }
  .brp-collapse { width:26px; height:24px; border-radius:6px; }

  .brp-screen { min-height:150px; border-width:5px; }
  .brp-screen-topline { height:25px; padding:0 7px; font-size:calc(9.4px * var(--brp-font-scale)); }
  .brp-screen-main { min-height:93px; padding:6px 7px 5px; }
  .brp-channel { font-size:calc(9.6px * var(--brp-font-scale)); }
  .brp-cart-line { font-size:calc(30px * var(--brp-font-scale)); margin-top:3px; }
  .brp-cart-line small { font-size:calc(10px * var(--brp-font-scale)); }
  .brp-total { font-size:calc(17px * var(--brp-font-scale)); margin-top:3px; }
  .brp-last { min-height:14px; margin-top:4px; font-size:calc(9.4px * var(--brp-font-scale)); }
  .brp-screen-textline { min-height:27px; padding:5px 6px; font-size:calc(8.8px * var(--brp-font-scale)); }

  .brp-search { margin:6px 0 1px; padding:6px; }
  .brp-search input { height:31px; }
  .brp-search button { width:32px; }

  .brp-navpad {
    width:88px;
    margin:6px auto 5px;
    grid-template-rows:repeat(3,17px);
    border-radius:10px;
    font-size:calc(8.8px * var(--brp-font-scale));
  }
  .brp-navpad button { width:24px; height:17px; }
  .brp-nav-dot { width:8px; height:8px; box-shadow:0 0 0 3px #121416, 0 0 7px color-mix(in srgb,var(--brp-accent) 55%,transparent); }
  .brp-speaker { height:15px; margin:0 8px 6px; gap:3px; }
  .brp-speaker i { width:14px; }

  .brp-keypad { gap:4px; }
  .brp-key {
    min-height:48px;
    padding:4px 3px 4px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    text-align:center;
    gap:2px;
  }
  .brp-key .brp-num {
    position:absolute;
    top:4px;
    left:5px;
    padding:0;
    font-size:calc(9.6px * var(--brp-font-scale));
    line-height:1;
  }
  .brp-key svg {
    width:18px;
    height:18px;
    margin:0 0 1px;
    flex:0 0 auto;
  }
  .brp-key small {
    width:100%;
    min-height:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px;
    font-size:calc(8.35px * var(--brp-font-scale));
    line-height:1;
    text-align:center;
    white-space:nowrap;
  }
  .brp-key small b { min-width:14px; height:14px; font-size:calc(7.3px * var(--brp-font-scale)); }

  .brp-bottomkeys { gap:5px; margin-top:6px; }
  .brp-bottomkeys button, .brp-bottomkeys a { min-height:31px; font-size:calc(8.9px * var(--brp-font-scale)); gap:4px; }

  .brp-mobile-trigger {
    display:flex;
    width:68px;
    min-height:102px;
    border-radius:18px 0 0 18px;
    padding:10px 6px 7px;
    box-shadow:0 8px 24px rgba(0,0,0,.34);
  }
  .brp-mobile-trigger .brp-trigger-radio { width:35px; height:44px; }
  .brp-mobile-trigger .brp-trigger-label { font-size:9.8px; line-height:.98; margin-top:2px; }
  .brp-mobile-trigger .brp-trigger-chevron { left:4px; font-size:22px; }
  .brp-mobile-trigger .brp-trigger-count { right:4px; top:8px; bottom:auto; min-width:22px; height:20px; line-height:20px; font-size:10.5px; }

  .brp-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.43); backdrop-filter:blur(2px); pointer-events:auto; }
  #brp-radio-panel.brp-mobile-open .brp-backdrop { display:block; }
  #brp-radio-panel.brp-mobile-open .brp-mobile-trigger { display:none; }
  .brp-desktop-trigger { display:none !important; }
}

@media (max-height: 720px) and (min-width: 768px) {
  .brp-device { transform:translateX(110%) scale(.86); transform-origin:right center; }
  .brp-desktop-open .brp-device { transform:translateX(0) scale(.86); }
}

@media (prefers-reduced-motion: reduce) {
  .brp-device { transition:none; }
}

/* =========================================================
   Fesselliebe Quick Panel 1.5 – seamless Fesselliebe dock integration
   ========================================================= */
#brp-radio-panel { --brp-accent: #d00032; }

/* A mobile trigger dock is inserted directly after #header by front.js. */
.brp-mobile-dock { display: none; }

@media (min-width: 768px) {
  /* In dock mode the shop itself becomes narrower instead of being covered. */
  body.brp-dock-enabled > #header,
  body.brp-dock-enabled > #wrapper,
  body.brp-dock-enabled > #footer {
    width: calc(100% - var(--brp-dock-space, 64px)) !important;
    max-width: calc(100% - var(--brp-dock-space, 64px)) !important;
    transition: width .28s cubic-bezier(.2,.8,.2,1), max-width .28s cubic-bezier(.2,.8,.2,1);
  }

  body.brp-dock-enabled #brp-radio-panel.brp-dock-mode:not(.brp-desktop-open) .brp-desktop-trigger {
    width: 56px;
    min-height: 88px;
    padding: 8px 5px 7px;
    border-radius: 14px 0 0 14px;
    box-shadow: none;
  }
  body.brp-dock-enabled #brp-radio-panel.brp-dock-mode:not(.brp-desktop-open) .brp-trigger-radio {
    width: 30px;
    height: 39px;
  }
  body.brp-dock-enabled #brp-radio-panel.brp-dock-mode:not(.brp-desktop-open) .brp-trigger-label {
    font-size: 8.8px;
  }
  body.brp-dock-enabled #brp-radio-panel.brp-dock-mode:not(.brp-desktop-open) .brp-trigger-count {
    right: 2px;
  }

  /* Panel visually belongs to the reserved rail. */
  body.brp-dock-enabled #brp-radio-panel.brp-dock-mode .brp-device {
    filter: drop-shadow(-8px 12px 22px rgba(0,0,0,.24));
  }
}

@media (max-width: 767.98px) {
  /* No floating tab over product/category content: the trigger lives in flow. */
  .brp-mobile-dock {
    min-height: 54px;
    padding: 6px var(--bw-gutter, 16px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    background: #0c0c0c;
    border-bottom: 1px solid rgba(255,255,255,.18);
    color: #fff;
    position: relative;
    z-index: 1030;
  }
  .brp-mobile-dock::before {
    content: "SHOP STEUERUNG";
    margin-right: auto;
    color: #c9c6c0;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .1em;
  }
  .brp-mobile-dock .brp-mobile-trigger {
    display: flex !important;
    position: static !important;
    width: auto !important;
    min-width: 104px;
    min-height: 42px !important;
    padding: 4px 9px !important;
    border-radius: 0 !important;
    flex-direction: row !important;
    justify-content: center;
    gap: 7px;
    transform: none !important;
    box-shadow: none !important;
    border-color: #5f5f5f;
    background: #181818;
  }
  .brp-mobile-dock .brp-mobile-trigger:hover,
  .brp-mobile-dock .brp-mobile-trigger:focus-visible {
    transform: none !important;
    border-color: var(--brp-accent);
  }
  .brp-mobile-dock .brp-trigger-radio {
    width: 28px !important;
    height: 34px !important;
    flex: 0 0 28px;
    padding-top: 5px;
  }
  .brp-mobile-dock .brp-trigger-antenna { display: none; }
  .brp-mobile-dock .brp-trigger-screen { width: 19px; height: 9px; font-size: 5px; }
  .brp-mobile-dock .brp-trigger-keys { width: 18px; margin-top: 3px; }
  .brp-mobile-dock .brp-trigger-keys b { width: 4px; height: 3px; }
  .brp-mobile-dock .brp-trigger-label {
    margin: 0 !important;
    font-size: 8.8px !important;
    line-height: 1.02;
  }
  .brp-mobile-dock .brp-trigger-chevron { display: none; }
  .brp-mobile-dock .brp-trigger-count {
    top: -5px !important;
    right: -5px !important;
    bottom: auto !important;
    min-width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    background: var(--brp-accent) !important;
    color: #fff !important;
  }
  body.brp-mobile-panel-open .brp-mobile-dock { visibility: hidden; }

  /* Once moved into the mobile dock, the old fixed trigger position is unused. */
  #brp-radio-panel.brp-dock-mode > .brp-mobile-trigger { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.brp-dock-enabled > #header,
  body.brp-dock-enabled > #wrapper,
  body.brp-dock-enabled > #footer { transition: none !important; }
}

/* v1.5.0 dock safety: an intentionally opened mobile drawer must sit above
 * the sticky shop header/backdrop, while its collapsed trigger remains in flow. */
@media (max-width: 767.98px) {
  #brp-radio-panel.brp-mobile-open { z-index: 1085 !important; }
  #brp-radio-panel.brp-mobile-open .brp-device { z-index: 1087 !important; }
  #brp-radio-panel.brp-mobile-open .brp-backdrop { z-index: 1084 !important; }
}

/* =========================================================
   Fesselliebe Quick Panel 1.6.0 – mobile side-middle trigger restored
   ========================================================= */
@media (max-width: 767.98px) {
  .brp-mobile-dock { display:none !important; }
  body.brp-mobile-panel-open .brp-mobile-dock { display:none !important; }

  #brp-radio-panel.brp-dock-mode > .brp-mobile-trigger,
  #brp-radio-panel > .brp-mobile-trigger {
    display:flex !important;
    position:fixed !important;
    right:0 !important;
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    width:58px !important;
    min-height:92px !important;
    padding:8px 5px 7px !important;
    border-radius:16px 0 0 16px !important;
    z-index:1082 !important;
    box-shadow:0 10px 28px rgba(0,0,0,.36) !important;
    background:linear-gradient(115deg,color-mix(in srgb,var(--brp-shell-color) 72%,#74797d),var(--brp-shell-color) 60%,color-mix(in srgb,var(--brp-shell-color) 80%,#000)) !important;
  }
  #brp-radio-panel > .brp-mobile-trigger:hover,
  #brp-radio-panel > .brp-mobile-trigger:focus-visible {
    transform:translate(-3px,-50%) !important;
    outline:3px solid #fff !important;
    outline-offset:2px;
  }
  #brp-radio-panel > .brp-mobile-trigger .brp-trigger-radio {
    width:31px !important;
    height:39px !important;
    padding-top:7px !important;
  }
  #brp-radio-panel > .brp-mobile-trigger .brp-trigger-label {
    margin-top:2px !important;
    font-size:8.6px !important;
    line-height:.98 !important;
    letter-spacing:.065em !important;
  }
  #brp-radio-panel > .brp-mobile-trigger .brp-trigger-chevron {
    left:2px !important;
    font-size:19px !important;
  }
  #brp-radio-panel > .brp-mobile-trigger .brp-trigger-count {
    top:4px !important;
    right:2px !important;
    bottom:auto !important;
    min-width:21px !important;
    height:20px !important;
    line-height:20px !important;
    font-size:10px !important;
    background:var(--brp-accent) !important;
    color:#fff !important;
  }
  #brp-radio-panel.brp-mobile-open > .brp-mobile-trigger { display:none !important; }
}

/* =========================================================
   Fesselliebe Quick Panel 1.7.0 – full-width header + larger controls
   ========================================================= */
@media (min-width: 768px) {
  /* The control panel must never make the shop header look inset.  The
     header stays full viewport width; only page content reserves a right
     rail while dock mode is active. */
  body.brp-dock-enabled > #header {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.brp-dock-enabled > #wrapper,
  body.brp-dock-enabled > #footer {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: var(--brp-dock-space, 80px) !important;
    transition: margin-right .28s cubic-bezier(.2,.8,.2,1) !important;
  }

  /* Override the v1.5 width-based docking rule. */
  body.brp-dock-enabled > #wrapper,
  body.brp-dock-enabled > #footer,
  body.brp-dock-enabled > #header {
    box-sizing: border-box !important;
  }

  /* Larger and easier to recognise desktop pull tab. */
  body.brp-dock-enabled #brp-radio-panel.brp-dock-mode:not(.brp-desktop-open) .brp-desktop-trigger,
  #brp-radio-panel:not(.brp-desktop-open) .brp-desktop-trigger {
    width: 74px !important;
    min-height: 112px !important;
    padding: 10px 7px 9px !important;
    border-radius: 18px 0 0 18px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.34) !important;
  }
  body.brp-dock-enabled #brp-radio-panel.brp-dock-mode:not(.brp-desktop-open) .brp-trigger-radio,
  #brp-radio-panel:not(.brp-desktop-open) .brp-desktop-trigger .brp-trigger-radio {
    width: 39px !important;
    height: 49px !important;
    padding-top: 9px !important;
  }
  body.brp-dock-enabled #brp-radio-panel.brp-dock-mode:not(.brp-desktop-open) .brp-trigger-screen,
  #brp-radio-panel:not(.brp-desktop-open) .brp-desktop-trigger .brp-trigger-screen {
    width: 27px !important;
    height: 13px !important;
    font-size: 6.5px !important;
  }
  body.brp-dock-enabled #brp-radio-panel.brp-dock-mode:not(.brp-desktop-open) .brp-trigger-keys,
  #brp-radio-panel:not(.brp-desktop-open) .brp-desktop-trigger .brp-trigger-keys {
    width: 26px !important;
  }
  body.brp-dock-enabled #brp-radio-panel.brp-dock-mode:not(.brp-desktop-open) .brp-trigger-label,
  #brp-radio-panel:not(.brp-desktop-open) .brp-desktop-trigger .brp-trigger-label {
    font-size: 10.3px !important;
    line-height: 1 !important;
  }
  body.brp-dock-enabled #brp-radio-panel.brp-dock-mode:not(.brp-desktop-open) .brp-trigger-count,
  #brp-radio-panel:not(.brp-desktop-open) .brp-desktop-trigger .brp-trigger-count {
    right: 4px !important;
    top: 7px !important;
    bottom: auto !important;
    min-width: 24px !important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 767.98px) {
  /* Keep the requested right-middle placement, but make the control much
     easier to recognise and tap without turning it into a large obstruction. */
  #brp-radio-panel.brp-dock-mode > .brp-mobile-trigger,
  #brp-radio-panel > .brp-mobile-trigger {
    width: 68px !important;
    min-height: 106px !important;
    padding: 9px 6px 8px !important;
    border-radius: 18px 0 0 18px !important;
  }
  #brp-radio-panel > .brp-mobile-trigger .brp-trigger-radio {
    width: 38px !important;
    height: 48px !important;
    padding-top: 8px !important;
  }
  #brp-radio-panel > .brp-mobile-trigger .brp-trigger-screen {
    width: 26px !important;
    height: 12px !important;
    font-size: 6px !important;
  }
  #brp-radio-panel > .brp-mobile-trigger .brp-trigger-keys {
    width: 25px !important;
  }
  #brp-radio-panel > .brp-mobile-trigger .brp-trigger-label {
    font-size: 10.2px !important;
    line-height: 1 !important;
    letter-spacing: .055em !important;
  }
  #brp-radio-panel > .brp-mobile-trigger .brp-trigger-chevron {
    left: 3px !important;
    font-size: 21px !important;
  }
  #brp-radio-panel > .brp-mobile-trigger .brp-trigger-count {
    top: 5px !important;
    right: 3px !important;
    min-width: 24px !important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.brp-dock-enabled > #wrapper,
  body.brp-dock-enabled > #footer { transition: none !important; }
}

/* =========================================================
   Fesselliebe Quick Panel 1.8.0 – full-height drawer + contrast fix
   ========================================================= */
#brp-radio-panel {
  --brp-accent: #d00032;
}

/* Brand blue always carries white text; never black-on-blue. */
.brp-trigger-count,
.brp-key-checkout,
.brp-key-checkout small,
.brp-key-checkout .brp-num,
.brp-search button {
  color: #fff !important;
}
.brp-key-checkout {
  background: linear-gradient(180deg, #2742ff, #d00032) !important;
  border-color: #9aa7ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 5px rgba(0,0,0,.35) !important;
}
.brp-key-checkout svg { color:#fff !important; fill:#fff !important; }
.brp-trigger-count { box-shadow:0 0 0 2px #fff,0 3px 10px rgba(0,0,0,.38) !important; }

@media (min-width: 768px) {
  /* The open device is a genuine full-height right drawer.  This prevents the
     antenna/top controls from being cut off and lets the shell reach the
     bottom of the viewport regardless of monitor height. */
  #brp-radio-panel {
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    height: 100dvh !important;
    transform: none !important;
    display: flex;
    align-items: stretch;
  }
  #brp-radio-panel .brp-device {
    width: var(--brp-panel-width) !important;
    height: 100dvh !important;
    max-height: none !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: right center;
  }
  #brp-radio-panel.brp-desktop-open .brp-device { transform: translateX(0) !important; }
  #brp-radio-panel:not(.brp-desktop-open) .brp-device { transform: translateX(110%) !important; }
  #brp-radio-panel .brp-device-top {
    flex: 0 0 58px;
    height: 58px;
    margin: 0 10px 0 0;
    overflow: hidden;
  }
  #brp-radio-panel .brp-antenna {
    top: 4px !important;
    right: 34px !important;
    width: 36px !important;
    height: 54px !important;
    border-radius: 12px 12px 5px 5px !important;
  }
  #brp-radio-panel .brp-antenna i { margin-top: 31px !important; width: 14px !important; }
  #brp-radio-panel .brp-antenna::after { height: 7px !important; }
  #brp-radio-panel .brp-knob {
    left: 30px !important;
    bottom: 2px !important;
    width: 48px !important;
    height: 32px !important;
  }
  #brp-radio-panel .brp-status-led { left: 91px !important; bottom: 9px !important; }
  #brp-radio-panel .brp-shell {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 22px 0 0 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: #676d73 #151719;
  }
  #brp-radio-panel .brp-shell::-webkit-scrollbar { width: 7px; }
  #brp-radio-panel .brp-shell::-webkit-scrollbar-thumb { background:#676d73; }

  /* Pull tab remains vertically centred while the full-height drawer is closed. */
  #brp-radio-panel:not(.brp-desktop-open) .brp-desktop-trigger {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 767.98px) {
  /* Do not transform the panel root: transformed ancestors break position:fixed
     children on several mobile browsers and caused the SHOP PANEL label to be
     clipped off-screen. */
  #brp-radio-panel {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: 0 !important;
    height: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  #brp-radio-panel > .brp-mobile-trigger,
  #brp-radio-panel.brp-dock-mode > .brp-mobile-trigger {
    position: fixed !important;
    top: 50dvh !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    width: 74px !important;
    min-height: 112px !important;
    padding: 10px 7px 9px !important;
    overflow: visible !important;
  }
  #brp-radio-panel > .brp-mobile-trigger .brp-trigger-label {
    width: 100% !important;
    font-size: 10.2px !important;
    line-height: 1.02 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  /* Open state is a full-height drawer; content scrolls inside the radio shell. */
  #brp-radio-panel .brp-device {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(88vw, 340px) !important;
    height: 100dvh !important;
    max-height: none !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: translateX(105%) !important;
    filter: drop-shadow(-14px 0 28px rgba(0,0,0,.42));
  }
  #brp-radio-panel.brp-mobile-open .brp-device { transform: translateX(0) !important; }
  #brp-radio-panel .brp-device-top {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    flex: 0 0 48px !important;
    height: 48px !important;
    margin: 0 8px 0 0 !important;
    overflow: hidden !important;
  }
  #brp-radio-panel .brp-antenna {
    top: 2px !important;
    right: 28px !important;
    width: 32px !important;
    height: 46px !important;
  }
  #brp-radio-panel .brp-antenna i { margin-top: 27px !important; }
  #brp-radio-panel .brp-knob { left: 25px !important; bottom: 2px !important; width: 40px !important; height: 27px !important; }
  #brp-radio-panel .brp-status-led { left: 77px !important; bottom: 8px !important; }
  #brp-radio-panel .brp-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 20px 0 0 0 !important;
    padding: 9px 10px 14px !important;
    scrollbar-width: none;
  }
  #brp-radio-panel .brp-shell::-webkit-scrollbar { display:none; }

  .brp-key small {
    font-size: calc(9px * var(--brp-font-scale)) !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-height: 20px !important;
  }
  .brp-key { min-height: 58px !important; }
}


/* =========================================================
   Fesselliebe Quick Panel 1.9.0 – uninterrupted full-width strips
   ========================================================= */
@media (min-width: 768px) {
  /* The wrapper is deliberately docked to keep the panel from covering shop
     content. Full-width breadcrumb/utility strips are visually extended into
     that reserved rail so horizontal bars no longer stop before the viewport
     edge. */
  body.brp-dock-enabled > #wrapper .breadcrumb-container,
  body.brp-dock-enabled > #wrapper > .breadcrumb-container {
    width: calc(100% + var(--brp-dock-space, 80px)) !important;
    max-width: none !important;
    margin-right: calc(-1 * var(--brp-dock-space, 80px)) !important;
    box-sizing: border-box !important;
  }
  body.brp-dock-enabled > #wrapper .breadcrumb-container > .container,
  body.brp-dock-enabled > #wrapper .breadcrumb-container > .container-md {
    padding-right: calc(var(--bw-gutter, 28px) + var(--brp-dock-space, 80px)) !important;
  }
}

/* =========================================================
   Fesselliebe Quick Panel 2.0.0 – bottom-anchored desktop radio
   with fully visible antenna / hardware and no dead lower area
   ========================================================= */
@media (min-width: 768px) {
  #brp-radio-panel {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    display: block !important;
    overflow: visible !important;
  }

  #brp-radio-panel .brp-device {
    position: relative !important;
    width: var(--brp-panel-width) !important;
    height: auto !important;
    max-height: calc(100dvh - 8px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    transform-origin: right bottom !important;
  }
  #brp-radio-panel.brp-desktop-open .brp-device {
    transform: translateX(0) !important;
  }
  #brp-radio-panel:not(.brp-desktop-open) .brp-device {
    transform: translateX(110%) !important;
  }

  /* The radio hardware is intentionally visible above the shell. */
  #brp-radio-panel .brp-device-top {
    position: relative !important;
    flex: 0 0 92px !important;
    width: 100% !important;
    height: 92px !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: 3 !important;
  }
  #brp-radio-panel .brp-antenna {
    top: 2px !important;
    right: 32px !important;
    width: 38px !important;
    height: 88px !important;
    border-radius: 14px 14px 6px 6px !important;
    z-index: 4 !important;
  }
  #brp-radio-panel .brp-antenna i {
    width: 14px !important;
    margin-top: 57px !important;
  }
  #brp-radio-panel .brp-antenna::after {
    height: 7px !important;
  }
  #brp-radio-panel .brp-knob {
    left: 28px !important;
    bottom: 2px !important;
    width: 48px !important;
    height: 34px !important;
  }
  #brp-radio-panel .brp-status-led {
    left: 90px !important;
    bottom: 10px !important;
  }

  #brp-radio-panel .brp-shell {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 100px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 22px 0 0 0 !important;
    padding-bottom: 12px !important;
    scrollbar-width: thin;
  }

  /* The closed pull tab is centred against the viewport, independent of the
     natural open-device height. */
  #brp-radio-panel:not(.brp-desktop-open) .brp-desktop-trigger,
  body.brp-dock-enabled #brp-radio-panel.brp-dock-mode:not(.brp-desktop-open) .brp-desktop-trigger {
    position: fixed !important;
    top: 50dvh !important;
    right: 0 !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
}

/* =========================================================
   Fesselliebe Quick Panel 2.0.1 – keep full-width strips continuous
   across the reserved desktop dock rail
   ========================================================= */
@media (min-width: 768px) {
  body.brp-dock-enabled > #wrapper {
    overflow: visible !important;
  }
  body.brp-dock-enabled > #wrapper .breadcrumb-container,
  body.brp-dock-enabled > #wrapper > .breadcrumb-container {
    position: relative !important;
    overflow: visible !important;
    width: calc(100% + var(--brp-dock-space, 80px)) !important;
    max-width: none !important;
    margin-right: calc(-1 * var(--brp-dock-space, 80px)) !important;
  }
  body.brp-dock-enabled > #wrapper .breadcrumb-container::after,
  body.brp-dock-enabled > #wrapper > .breadcrumb-container::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 100%;
    width: var(--brp-dock-space, 80px);
    background: #f4f3ef;
    pointer-events: none;
  }
  body.brp-dock-enabled > #wrapper .breadcrumb-container > *,
  body.brp-dock-enabled > #wrapper > .breadcrumb-container > * {
    position: relative;
    z-index: 1;
  }
}

/* =========================================================
   Fesselliebe Quick Panel 2.0.2 – keep the page frame full width.
   Reserve panel space inside content instead of shrinking #wrapper,
   so Hummingbird's breadcrumb rail can genuinely reach the viewport edge.
   ========================================================= */
@media (min-width: 768px) {
  body.brp-dock-enabled > #header,
  body.brp-dock-enabled > #wrapper,
  body.brp-dock-enabled > #footer {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Reserve the radio rail in actual content, not in the wrapper itself. */
  body.brp-dock-enabled > #wrapper > .columns-container {
    width: 100% !important;
    max-width: var(--bw-max, 1440px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-right: calc(var(--bw-gutter, 28px) + var(--brp-dock-space, 82px)) !important;
    box-sizing: border-box !important;
    transition: padding-right .28s cubic-bezier(.2,.8,.2,1) !important;
  }

  /* Hummingbird breadcrumb is .breadcrumb__wrapper, not breadcrumb-container. */
  body.brp-dock-enabled > #wrapper > .breadcrumb__wrapper,
  body.brp-dock-enabled > #wrapper .breadcrumb__wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.brp-dock-enabled > #wrapper > .columns-container { transition: none !important; }
}

/* Fesselliebe Quick Panel 2.0.3 – do not transform Hummingbird's breadcrumb rail. */
@media (min-width: 768px) {
  body.brp-dock-enabled > #wrapper > .breadcrumb__wrapper,
  body.brp-dock-enabled > #wrapper .breadcrumb__wrapper {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }
}

/* FESSELLIEBE QUICK PANEL VISUAL OVERRIDES — same actions, less radio/military visual language */
#brp-radio-panel{--brp-accent:#d00032;--brp-shell-color:#111113;--brp-key-color:#1f1f22;--brp-screen-color:#09090b;--brp-screen-ink:#f7f5f3}
.brp-device-top,.brp-speaker{display:none!important}
.brp-device{padding-top:0!important;filter:drop-shadow(-14px 18px 35px rgba(0,0,0,.46))}
.brp-device::before{inset:0!important;border-radius:18px 0 0 18px!important;background:linear-gradient(150deg,#19191c,#0d0d0f)!important;border:1px solid rgba(255,255,255,.14)!important}
.brp-shell{border-radius:18px 0 0 18px!important;background:transparent!important;border:0!important;padding-top:10px!important}
.brp-brandbar{border-bottom:1px solid rgba(208,0,50,.45)!important;background:transparent!important}
.brp-brandbar strong{letter-spacing:.1em!important}
.brp-mark i{background:#d00032!important}
.brp-screen{background:linear-gradient(180deg,#0b0b0d,#131315)!important;color:#f7f5f3!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:10px!important;box-shadow:inset 0 0 0 1px rgba(208,0,50,.08)!important}
.brp-screen *{color:inherit!important}
.brp-screen-textline{border-top-color:rgba(208,0,50,.38)!important;color:#ff9aad!important}
.brp-status-led,.brp-trigger-led,.brp-nav-dot{background:#d00032!important;box-shadow:0 0 0 3px rgba(208,0,50,.18),0 0 14px rgba(208,0,50,.5)!important}
.brp-key{background:#1b1b1e!important;border-color:rgba(255,255,255,.14)!important;border-radius:9px!important}
.brp-key:hover{border-color:#d00032!important;background:#250009!important}
.brp-key-checkout,.brp-bottomkeys a{background:#d00032!important;color:#fff!important;border-color:#d00032!important}
.brp-bottomkeys button{background:#171719!important;border-color:rgba(255,255,255,.14)!important;color:#f7f5f3!important}
.brp-panel-trigger{background:#111113!important;border-color:rgba(255,255,255,.16)!important;border-radius:12px 0 0 12px!important}
.brp-trigger-radio{border-radius:6px!important;border-color:#d00032!important;background:#09090b!important;box-shadow:none!important}
.brp-trigger-antenna,.brp-trigger-keys{display:none!important}.brp-trigger-screen{position:static!important;display:grid!important;place-items:center!important;inset:auto!important;width:100%!important;height:100%!important;background:transparent!important;color:#fff!important;font-weight:900!important;letter-spacing:.08em!important}
.brp-trigger-label{color:#f7f5f3!important}