/**
 * Zusätzliche Side-Tabs (COM, Baustellenradio, PTT-Radio) — gleiche Basis wie Note-It (.noteit-side-tab).
 * Stapel rechts (oben → unten): PTT-Radio, Note-It (Mitte), COM, Baustellenradio.
 */

#qa-radio-side-tab.noteit-side-tab {
  top: calc(50% - 156px);
  transform: translateY(-50%);
}

#qa-com-side-tab.noteit-side-tab {
  top: calc(50% + 78px);
  transform: translateY(-50%);
}

#qa-bsr-side-tab.noteit-side-tab {
  top: calc(50% + 156px);
  transform: translateY(-50%);
}

.qa-side-tab-btn--com {
  --noteit-tab-bg: rgba(236, 253, 255, 0.96);
  --noteit-postit-rim: #0891b2;
  --noteit-postit-rim-deep: #0e7490;
}

.qa-side-tab-btn--com .noteit-side-tab-label {
  color: #0e7490;
}

.qa-side-tab-btn--radio {
  --noteit-tab-bg: rgba(255, 247, 237, 0.96);
  --noteit-postit-rim: #ea580c;
  --noteit-postit-rim-deep: #c2410c;
  text-decoration: none;
  box-sizing: border-box;
}

.qa-side-tab-btn--radio .noteit-side-tab-label {
  color: #c2410c;
}

.qa-side-tab-btn--bsr {
  --noteit-tab-bg: rgba(240, 253, 244, 0.96);
  --noteit-postit-rim: #16a34a;
  --noteit-postit-rim-deep: #15803d;
}

.qa-side-tab-btn--bsr .noteit-side-tab-label {
  color: #15803d;
}

body.theme-standard .qa-side-tab-btn--com {
  --noteit-tab-bg: #f0f9ff;
}

body.theme-standard .qa-side-tab-btn--radio {
  --noteit-tab-bg: #fff7ed;
}

body.theme-standard .qa-side-tab-btn--bsr {
  --noteit-tab-bg: #f0fdf4;
}

@media (max-width: 720px) {
  #qa-radio-side-tab.noteit-side-tab {
    top: auto;
    bottom: calc(88px + 128px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }

  #qa-com-side-tab.noteit-side-tab {
    top: auto;
    bottom: calc(88px + 64px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }

  #qa-bsr-side-tab.noteit-side-tab {
    top: auto;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }

  body.has-kevin-app-tabs #qa-radio-side-tab.noteit-side-tab {
    bottom: calc(112px + 128px + env(safe-area-inset-bottom, 0px));
  }

  body.has-kevin-app-tabs #qa-com-side-tab.noteit-side-tab {
    bottom: calc(112px + 64px + env(safe-area-inset-bottom, 0px));
  }

  body.has-kevin-app-tabs #qa-bsr-side-tab.noteit-side-tab {
    bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }
}