/* BR Support Academy · Layout & Responsive Readability Fix v3.6.2
   Ziel: größere, klar lesbare Navigation, mittig ausgerichtete Inhaltsseiten
   und saubere Tablet-/Smartphone-Darstellung. */

:root{
  --academy-sidebar-width:292px;
  --academy-content-width:1520px;
  --academy-page-gap:clamp(22px,3vw,54px);
}

/* Desktop-Grundlayout */
.app{
  grid-template-columns:var(--academy-sidebar-width) minmax(0,1fr)!important;
}
#sb{
  width:var(--academy-sidebar-width);
  min-width:var(--academy-sidebar-width);
  background:#11131f;
}
.sb-brand{
  min-height:66px;
  padding:17px 18px 15px;
  gap:12px;
}
.sb-brand-icon{width:34px;height:34px;border-radius:9px}
.sb-brand-sub{
  color:#b7bdcf;
  font-size:12px;
  font-weight:650;
  letter-spacing:.01em;
}
.sb-progress{padding:13px 18px 14px}
.sb-prog-row{margin-bottom:8px}
.sb-prog-lbl,.sb-prog-val{font-size:12px}
.sb-prog-lbl{color:#a8afc2}
.sb-prog-bar{height:4px}
.sb-nav{
  padding:8px 0 18px;
  scrollbar-gutter:stable;
}
.sb-nav::-webkit-scrollbar{width:8px}
.sb-nav::-webkit-scrollbar-thumb{background:#3a4055;border:2px solid #11131f;border-radius:8px}
.sb-section{
  padding:17px 18px 7px;
  color:#8f97ad;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.09em;
  opacity:1;
}
.nav-item{
  min-height:43px;
  padding:9px 17px;
  gap:11px;
  border-left-width:3px;
  color:#a8afc4;
  font-size:13.5px;
  font-weight:560;
  line-height:1.32;
}
.nav-item:hover{
  color:#f0f2f8;
  background:rgba(220,38,38,.09);
}
.nav-item.on{
  color:#fff;
  background:rgba(220,38,38,.15);
}
.nav-item.locked{
  opacity:.64;
}
.nav-item.locked:hover{color:#c1c6d5}
.ni-ico{width:17px;justify-content:center}
.ni-ico svg{width:16px;height:16px}
.ni-lbl{
  min-width:0;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.ni-badge{
  min-width:30px;
  padding:3px 6px;
  font-size:9.5px;
  text-align:center;
}
.ni-lock{width:12px;height:12px}
.sb-bottom{
  position:relative;
  z-index:3;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:#11131f;
  box-shadow:0 -10px 24px rgba(0,0,0,.16);
}
.sb-btn{
  min-height:42px;
  padding:10px 12px;
  color:#aeb5c7;
  font-size:13px;
}
.sb-btn svg{width:14px;height:14px}

/* Hauptbereich und Inhaltsbreite */
#main{min-width:0}
.topbar{
  min-height:56px;
  height:56px;
  padding:0 24px;
}
.tb-crumb{font-size:13px}
.pg-wrap{
  width:100%;
  scroll-padding-top:24px;
}
.pg{
  width:100%!important;
  max-width:var(--academy-content-width)!important;
  margin-inline:auto!important;
  padding:36px var(--academy-page-gap) 110px!important;
}
#pg-home{
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
#pg-train{
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}

/* Alle Lern-, Prüfungs- und Guidebook-Seiten mittig und breit */
#pg-c1,#pg-c2,#pg-c3,#pg-c4,#pg-c5,#pg-c6,#pg-c7,
#pg-ki,#pg-gespraech,#pg-quiz,#pg-sc,#pg-rolesc,#pg-cert,
#pg-guide-supporter,#pg-guide-supportmanagement,#pg-guide-moderator,
#pg-guide-teammanagement,#pg-guide-fraktionsmanagement,#pg-guide-admin,
#pg-guide-developer,#pg-library{
  width:100%!important;
  max-width:var(--academy-content-width)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:36px var(--academy-page-gap) 110px!important;
}

/* Inhalte dürfen die verfügbare Seitenbreite wirklich nutzen */
.academy-chapter-page,
.release-polished-page,
.release-guide-page,
.academy-content-library{
  width:100%;
}
.release-guide-layout{grid-template-columns:minmax(0,1fr) 286px}
.release-guide-main{min-width:0}
#pg-train .training-setup-shell{width:min(1480px,100%)}
#pg-train .tt-setup{padding-left:var(--academy-page-gap)!important;padding-right:var(--academy-page-gap)!important}

/* Allgemeine Lesbarkeit der Lernseiten */
.pg .ch-h,.pg .lesson-hero h2,.pg .release-guide-hero h2{
  font-size:clamp(27px,2.25vw,38px)!important;
  line-height:1.12!important;
}
.pg .ch-sub,.pg .lesson-hero p,.pg .release-guide-hero p{
  font-size:14px!important;
  line-height:1.72!important;
  color:#adb5ca!important;
}
.pg .section-title,.pg .sec{
  font-size:11px!important;
  color:#9ea7c1!important;
}
.pg .card-d,
.pg .chapter-role-card span,
.pg .ticket-phase-copy,
.pg .comm-template-body,
.pg .pro-list,
.pg .pro-panel p,
.pg .release-guide-main .kv-v,
.pg .release-guide-main .flow-node,
.pg .ams-rich-body p,
.pg .ams-rich-body li{
  font-size:12.5px!important;
  line-height:1.68!important;
}
.pg .card-t,.pg .pro-panel h3,.pg .template-pro h3{font-size:14px!important}

/* Große Monitore: Inhalte nicht links kleben lassen */
@media(min-width:1700px){
  :root{--academy-content-width:1560px}
  .pg{padding-top:42px!important}
}

/* Tablet: Sidebar als gut lesbarer Drawer */
@media(max-width:1180px){
  .app{grid-template-columns:minmax(0,1fr)!important}
  #main{width:100%;height:100vh;height:100dvh}
  #sb{
    position:fixed;
    inset:0 auto 0 0;
    z-index:800;
    width:min(86vw,330px);
    min-width:0;
    height:100vh;
    height:100dvh;
    max-height:100dvh;
    transform:translateX(-102%);
    transition:transform .24s cubic-bezier(.4,0,.2,1);
    box-shadow:14px 0 42px rgba(0,0,0,.58);
    padding-bottom:env(safe-area-inset-bottom);
  }
  #sb.open{transform:translateX(0)}
  .mob-bar{display:flex;min-height:54px}
  #mobBarTitle{font-size:14px!important;color:#e2e5ef!important;font-weight:700!important}
  #notifBellWrap,.top-user-card,#topRoleBadge,#settingsBtn{display:none!important}
  .topbar{height:44px;min-height:44px;padding:0 16px}
  .pg,
  #pg-c1,#pg-c2,#pg-c3,#pg-c4,#pg-c5,#pg-c6,#pg-c7,
  #pg-ki,#pg-gespraech,#pg-quiz,#pg-sc,#pg-rolesc,#pg-cert,
  #pg-guide-supporter,#pg-guide-supportmanagement,#pg-guide-moderator,
  #pg-guide-teammanagement,#pg-guide-fraktionsmanagement,#pg-guide-admin,
  #pg-guide-developer,#pg-library{
    max-width:none!important;
    padding:26px 22px 100px!important;
  }
  .release-guide-layout{grid-template-columns:1fr}
}

/* Smartphone */
@media(max-width:760px){
  #sb{width:min(92vw,340px)}
  .sb-brand{min-height:62px;padding:14px 16px}
  .sb-progress{padding:12px 16px}
  .sb-section{padding:16px 16px 6px;font-size:10.5px}
  .nav-item{
    min-height:48px;
    padding:11px 16px;
    font-size:14px;
    gap:12px;
  }
  .ni-ico svg{width:17px;height:17px}
  .sb-bottom{padding-left:14px;padding-right:14px}
  .sb-btn{min-height:46px;font-size:13.5px}
  .topbar{display:none!important}
  .mob-bar{min-height:58px;padding-bottom:8px}
  .pg,
  #pg-c1,#pg-c2,#pg-c3,#pg-c4,#pg-c5,#pg-c6,#pg-c7,
  #pg-ki,#pg-gespraech,#pg-quiz,#pg-sc,#pg-rolesc,#pg-cert,
  #pg-guide-supporter,#pg-guide-supportmanagement,#pg-guide-moderator,
  #pg-guide-teammanagement,#pg-guide-fraktionsmanagement,#pg-guide-admin,
  #pg-guide-developer,#pg-library{
    padding:18px 14px calc(96px + env(safe-area-inset-bottom))!important;
  }
  .pg .ch-h,.pg .lesson-hero h2,.pg .release-guide-hero h2{font-size:25px!important}
  .pg .ch-sub,.pg .lesson-hero p,.pg .release-guide-hero p{font-size:13px!important}
  .pg .card-d,
  .pg .chapter-role-card span,
  .pg .ticket-phase-copy,
  .pg .comm-template-body,
  .pg .pro-list,
  .pg .pro-panel p,
  .pg .release-guide-main .kv-v,
  .pg .release-guide-main .flow-node,
  .pg .ams-rich-body p,
  .pg .ams-rich-body li{font-size:12px!important}
  #pg-train .tt-setup{padding:16px 12px calc(92px + env(safe-area-inset-bottom))!important}
}

@media(max-width:420px){
  #sb{width:94vw}
  .nav-item{font-size:13.5px}
  .ni-badge{font-size:9px;min-width:28px}
  .pg,
  #pg-c1,#pg-c2,#pg-c3,#pg-c4,#pg-c5,#pg-c6,#pg-c7,
  #pg-ki,#pg-gespraech,#pg-quiz,#pg-sc,#pg-rolesc,#pg-cert,
  #pg-guide-supporter,#pg-guide-supportmanagement,#pg-guide-moderator,
  #pg-guide-teammanagement,#pg-guide-fraktionsmanagement,#pg-guide-admin,
  #pg-guide-developer,#pg-library{
    padding-left:11px!important;
    padding-right:11px!important;
  }
}