/* Retter-Portal v1.3.77
   Eingeklappte Tablet-Sidebar: Header-Spalten nach echtem Inhaltsbedarf.
   Die ausgeklappte Tablet-Ansicht aus v1.3.75 bleibt unverändert. */

@media (min-width:1101px) and (max-width:1400px){
  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-desktop-shell{
    /* Produkt/Version dürfen nie in die Feuerwehr-Spalte gedrückt werden. */
    grid-template-columns:max-content minmax(250px,1fr) max-content!important;
    grid-template-areas:"brand context actions"!important;
    align-items:center!important;
    column-gap:12px!important;
    width:100%!important;
    min-width:0!important;
    padding:10px 14px!important;
    overflow:hidden!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar.is-developer-organization .topbar-desktop-shell{
    grid-template-columns:max-content minmax(220px,1fr) max-content!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-title{
    grid-area:brand!important;
    position:static!important;
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
    white-space:nowrap!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-product,
  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-eyebrow{
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
    gap:7px!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-eyebrow > span:first-child{
    display:inline!important;
    flex:0 0 auto!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-version,
  html body.sidebar-collapsed .app-shell .main > .topbar .dev-organization-chip{
    flex:0 0 auto!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-context{
    grid-area:context!important;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    justify-self:stretch!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    overflow:hidden!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .department-context-switch,
  html body.sidebar-collapsed .app-shell .main > .topbar .department-context-static,
  html body.sidebar-collapsed .app-shell .main > .topbar.has-department-switch .department-context-switch{
    width:100%!important;
    min-width:0!important;
    max-width:400px!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-actions{
    grid-area:actions!important;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    justify-self:end!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
  }
}

/* Etwas kompakter auf genau den typischen 11-/12,9-Zoll-iPad-Breiten. */
@media (min-width:1101px) and (max-width:1280px){
  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-desktop-shell{
    grid-template-columns:max-content minmax(220px,1fr) max-content!important;
    column-gap:9px!important;
    padding-inline:11px!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar.is-developer-organization .topbar-desktop-shell{
    grid-template-columns:max-content minmax(185px,1fr) max-content!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .department-context-switch,
  html body.sidebar-collapsed .app-shell .main > .topbar .department-context-static,
  html body.sidebar-collapsed .app-shell .main > .topbar.has-department-switch .department-context-switch{
    max-width:360px!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-account-info,
  html body.sidebar-collapsed .app-shell .main > .topbar .topbar-account-info.has-role{
    grid-template-columns:max-content minmax(76px,126px)!important;
    max-width:246px!important;
  }

  html body.sidebar-collapsed .app-shell .main > .topbar .user-chip,
  html body.sidebar-collapsed .app-shell .main > .topbar .user-chip.has-role-badge{
    max-width:126px!important;
  }
}